Dashboard UI Kit

Apps PreviewDownload Design Package

Icon

import Icon from '@duik/icon'

This is a set of icons specific to the @duik. The icon set is not part of the @duik/it and has to be imported separatedly to dramatically reduce overall size of the library.

Icons are coming from a set of fonts, leveraging typographic ligature. Change the color the same way you would do as with a font.

Basic Usage

building
<Icon>
  building
</Icon>
ReactHTML Snippet
building
<Icon
  style={{
    color: 'red'
  }}
>
  building
</Icon>
ReactHTML Snippet
<Button square>
  <Icon>
    building
  </Icon>
</Button>
ReactHTML Snippet
<Button>
  <Icon mr>
    building
  </Icon>
  Text
</Button>
ReactHTML Snippet
<Button>
  Text
  <Icon ml>
    building
  </Icon>
</Button>
ReactHTML Snippet

List of Icons

Prop table

className

false

type: string
className, e.g. "my-custom-styling"
children

false

type: string
Icon name, see list below
mr

false

type: boolean
Adds right margin, useful when icon is next to the text, e.g. in button
ml

false

type: boolean
Adds left margin
...rest

false

type: any
Other properties are passed to the i element