Icon

Use the Icon component for SVG icons.

<Icon
  name='flame'
  color='orange'
/>

Accessibility for Icons

<Icon
  name='Chat'
  color='orange'
  title='Airplane Icon'
  titleId='unique-airplane-title-id'
  desc='Airplane Icon description'
  descId='unique-airplane-desc-id'
/>

aria-hidden="true" and focusable="false" are set by default to icons. When a title prop is passed, aria-hidden is set to false.

In order to support older browsers, please pass in a titleId

To add a descripton, please pass in desc and descId . <desc id="{unique-desc-id}">{description}</desc> is generated when desc and descId props are passed

Props

PropTypeDescription
namestringIcon key name
sizenumberWidth and height in pixels
colorstringA color key from theme.colors
titlestringTitle for to the icon
titleIdstringUnique ID for the <title>
descstringDescription for the icon
descIdstringUnique ID for the <desc>

For a full list of available icons, see Iconography.