Iconography
Learn how to use all the icons that distributed with the UI kit.
To use icons in your project, you need to install the @akinon/icons package.
This package contains all the icons that are distributed with the Akinon UI
library. With the Icon component, you can easily use any icon in your project.
To install the package, run the following command:
pnpm install @akinon/iconsIcon Component
After installing you can import the Icon component and start using it in your
project. You can find the full list of icons showcased below.
import { Icon } from '@akinon/icons';
<Icon icon="report" size={30} />
<Icon icon="download" size="50px" color="red" />To get a full list if icons dynamically, you can use the getIconList function,
which will load the icomoon’s selection.json file and return an array of icon
names.
import { getIconList } from '@akinon/icons';
const icons = getIconList();Props
Here is the list of props that you can use with the Icon component.
| Name | Type | Default | Description |
|---|---|---|---|
| icon | string | - | Name of the icon. You can find the full list of icons below. |
| size | number | 24 | Size of the icon. |
| color | string | - | Color of the icon. |
| title | string | - | Title of the icon. |
| style | object | - | Style of the icon. |
| removeInlineStyle | boolean | false | If true, the icon will not have any inline style. |
| disableFill | boolean | false | If true, the icon will not have a fill color. |
Icons Gallery
We also have the same icon set structured as icon font. We don’t recommend using it in your project, but if you need to use it for some reason (legacy apps), you can find more about it in the Fonts section.