Icon

v3.0.0-alpha.580

The Icon component is used to display icons from the Ant Design icon library.

<icon name="home" size="24" color="blue" />

Examples

Basic icon

<group>
  <icon name="mail" />
</group>

Icon with custom size

<group>
  <icon name="star" size="32" />
</group>

Icon with custom color

<group>
  <icon name="heart" color="red" />
</group>

Icon with size and color

<group>
  <icon name="warning" size="48" color="orange" />
</group>

Dynamic icons

You can also use the icon widget with a field to dynamically show an icon based on the field value.

<field name="status" widget="icon" />

In this example, if the field status has the value warning, it will display the warning icon:

You can also combine it with size and color attributes:

<field name="status" widget="icon" widget_props="{'size': 32, 'color': 'orange'}" />

API

Property	Description	Type	Default	Version
name	Name of the icon from Ant Design icon library (or field name when used as widget)	string	-	-
size	Size of the icon in pixels	number	16	-
color	Color of the icon (CSS color value)	string	-	-

Available icons

See the Icons page for a list of available icons.