React Reference > ons-icon Component

<ons-icon />

Displays an icon. The following icon suites are available:

Tutorial

Icons

Icons are displayed using the Icon component. In Onsen UI there are three families of icons available:

The icon is selected using the icon prop. To use Material Icons the md- prefix is used, ion- for Ionicons and fa- for Font Awesome.

<Icon icon='md-menu' />

The code above displays a Material Design menu icon.

See also

Attributes

[improve this]
Name Type Description
icon String

The icon name. "md-" prefix for Material Icons, "fa-" for Font Awesome and "ion-" prefix for Ionicons. See all available icons on the element description (at the top). Icons can also be styled based on modifier presence. Add comma-separated icons with "modifierName:" prefix. The code <ons-icon icon="ion-edit, material:md-edit"></ons-icon> will display "md-edit" for Material Design and "ion-edit" as the default icon. fa- prefix is added automatically if none is provided. Check See also section for more information.

Optional.
size String

The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in the size in pixels. Icons can also be styled based on modifier presence. Add comma-separated icons with "modifierName:" prefix. The code:

  <ons-icon
    icon="ion-edit"
    size="32px, material:24px">
  </ons-icon>

will render as a 24px icon if the "material" modifier is present and 32px otherwise.

Optional.
rotate Number Number of degrees to rotate the icon. Valid values are 90, 180 and 270. Optional.
fixed-width Boolean
false 		When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. Optional.
spin Specify whether the icon should be spinning. Optional.

Properties

[improve this]
Name Description
fixedWidth When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute.
spin Specify whether the icon should be spinning.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.