Skip to main content

Icons

All icons are created in a 24x24 pixel frame. Any resizing must be done from this size.

Import​

import { ICON_NAME } from '@resultadosdigitais/tangram-react-icons';

Sizes​

Circular icons use a slightly different scale, as they are surrounded by a larger object.

To use circular icons use RoundedIcon.

<RoundedIcon
  fill={'var(--success-surface-high-emphasis)'}
  size={RoundedIcon.sizes.xs}
>
  <Bell fill={'var(--neutral-icon-inverse)'} title="Icon title" />
</RoundedIcon>

Good practices​

Accessibility​

To provide a better screen reader experience, always include a title on the icon, describing what it means or its functionality. For this, use the <title> element.

Icon library​

How to add new icons​

See the guide on how to add new icons.

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.