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​

Feedback​