Components

Icon

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

Pro tip
Looking for an icon? Click here to search for one. We also have a guide for adding a new icon.

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.

Icon assets are stored in @sproutsocial/seeds-icons. See the Getting Started guide for an example of how to attach sprites to the DOM.

import { Icon } from '@sproutsocial/racine'
<Box display='flex' alignItems='center' justifyContent='space-around' py={400}>
<Icon name='tag-solid' size='mini' aria-label='Add a tag' color='icon.base' />
<Icon name='tag-outline' aria-label='Add a tag' color='icon.base' />
<Icon name='tag-outline' size='medium' aria-label='Add a tag' color='icon.base' />
<Icon name='tag-outline' size='large' aria-label='Add a tag' color='icon.base' />
<Icon name='tag-outline' size='jumbo' aria-label='Add a tag' color='icon.base' />
</Box>

Properties

NameTypeDefaultDescriptionRequired?
name
EnumIconNames
Name of the icon in the svg sprite
size
'mini'
'default'
'small'
'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 visual label

Subcomponents

Icon Toggle

In some cases, icons represent a stateful action that has both an inactive and active state. In these cases we use outline icons to represent the inactive state, and solid icons to represent the active state.

The Icon.Toggle component can be used to animate between these two states.

Accessibility note
It is best practice to wrap Icon.Toggle in a button. The button must include aria-label and aria-pressed in order for a screen reader to properly communicate the icon's state. See example below.
() => {
const [isActive, setIsActive] = useState(false)
const toggle = () => setIsActive(!isActive)
return (
<Box display='flex' alignItems='center' justifyContent='center'>
<Button
appearance='pill'
onClick={toggle}
aria-label='Like post' // This is required for accessibility
aria-pressed={isActive} // This is required for accessibility
>
<Icon.Toggle
activeName='heart-solid'
inactiveName='heart-outline'
isActive={isActive}
fixedWidth
ariaLabel='Like post'
/>
</Button>
</Box>
)
}

Find icons

Depending on where you work, there are several ways to browse and discover our icons: