Components

Icon

Icons symbolize common actions, features, and themes throughout our app.

Unless an icon is purely decorative, an aria-label attribute should be provided so that users who take advantage of screen readers can understand the content. If an icon is purely decorative, set aria-hidden="true" so that it is not picked up by screen readers.

import { Icon } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
nameEnumIconNames
Name of the icon in the svg sprite
size"mini""default""medium""large""jumbo""default"
fixedWidthbooleanfalse
Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list.
ariaLabelstring
Label used to describe the icon if not used with an accompanying label