Skip to content
Home

Icon

Info
Demos
Properties

Demos

Default and Medium-sized icons (Responsive)

<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.

<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

<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

<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" />