Iconography

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

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

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.