Skip to content
Home

Icon

Info
Demos
Properties

Demos

Default and Medium-sized icons (Responsive)

Code Editor
<Icon icon={Bell} title="Give Icons a Title, or ..." />
<Icon icon={BellMedium} aria-hidden />
<Bell title="I'm not responsive!" />
{/* <- Not responsive! */}

Icons with border. NB: Use it with caution. It should not be used where it can confuse users with being a clickable button.

Code Editor
<P>
  <Icon border={true} icon={Bell} right />
  <Icon border={true} icon={BellMedium} size="medium" right />
  <IconPrimary border={true} icon={'information'} right />
  <IconPrimary border={true} icon={'information'} size="medium" right />
  <Button icon={<IconPrimary icon="add" border />} text="Button" />
</P>

Responsive to its inherited font-size

h1 with auto sized icon

Code Editor
<h1 className="dnb-h--xx-large">
  h1 with auto sized <Icon icon={BellMedium} size="auto" aria-hidden />{' '}
  icon
</h1>

Icon color variations

All of these methods will output the same color

Code Editor
<Icon
  icon={BellMedium}
  color="var(--color-fire-red)"
  title="CSS variable"
/>
<Icon icon={BellMedium} color="#DC2A2A" title="Hex" />
<Icon icon={BellMedium} color="rgb(220,42,42)" title="RGB" />