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