Icon

Components

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'

<Box display='flex' alignItems='center' justifyContent='space-around' py={400}>
  <Icon name='tag' size='mini' aria-label='Add a tag' />
  <Icon name='tag' aria-label='Add a tag' />
  <Icon name='tag' size='medium' aria-label='Add a tag' />
  <Icon name='tag' size='large' aria-label='Add a tag' />
  <Icon name='tag' size='jumbo' aria-label='Add a tag' />
</Box>

<Box display='flex' alignItems='center' justifyContent='space-around' py={400}>
  <Icon name='tag' size='mini' aria-label='Add a tag' />
  <Icon name='tag' aria-label='Add a tag' />
  <Icon name='tag' size='medium' aria-label='Add a tag' />
  <Icon name='tag' size='large' aria-label='Add a tag' />
  <Icon name='tag' size='jumbo' aria-label='Add a tag' />
</Box>

Properties

System props

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

COMMON

Learn more

Name	Type	Default	Description
`name`	`EnumIconNames`		Name of the icon in the svg sprite
`size`	`"mini""default""medium""large""jumbo"`	`"default"`
`fixedWidth`	`boolean`	`false`	Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list.
`ariaLabel`	`string`		Label used to describe the icon if not used with an accompanying 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 filled icons to represent the active state.

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

() => {
  const [isActive, setIsActive] = useState(false)
  const toggle = () => setIsActive(!isActive)

  return (
    <Box display='flex' alignItems='center' justifyContent='center'>
      <Button appearance='pill' onClick={toggle}>
        <Icon.Toggle
          activeName='heart'
          inactiveName='heart-outline'
          isActive={isActive}
          fixedWidth
          ariaLabel='Like post'
        />
      </Button>
    </Box>
  )
}

() => {
  const [isActive, setIsActive] = useState(false)
  const toggle = () => setIsActive(!isActive)
  return (
    <Box display='flex' alignItems='center' justifyContent='center'>
      <Button appearance='pill' onClick={toggle}>
        <Icon.Toggle
          activeName='heart'
          inactiveName='heart-outline'
          isActive={isActive}
          fixedWidth
          ariaLabel='Like post'
        />
      </Button>
    </Box>
  )
}

Name	Type	Default	Description
`activeName`	`EnumIconNames`		Name of the icon to be shown in the active state
`inactiveName`	`EnumIconNames`		Name of the icon to be shown in the inactive state
`isActive`	`boolean`		Whether the active icon should be shown or not
`size`	`"mini""default""medium""large""jumbo"`	`"default"`
`fixedWidth`	`boolean`	`false`
`ariaLabel`	`string`

Find icons

You can discover currently available icons on their respective platforms:

Add icons

Once an icon SVG has been obtained, make a Pull Request to racine. After the pull request has been merged, the version of Racine will need to be bumped in order to use the icon in your project.

Best practices

The source SVG icon file should not contain any fill colors unless it is a branded icon.
New icons should be placed in the icons folder of your local copy of the Racine repo.
SVG files should not be minified or otherwise optimized before they are added to the library in GitHub — the SVG Sprite tools used by Racine handle optimization automatically.