IKONO React Library
Install the IKONO React library to start adding icons now.
IKONO icons can be used in a few different ways. Directly by copying or downloading from the interface, using the SVG icon library or by using the dedicated react library.
1. Installation
Install the package using you're package manager of choice.1npm i @ikono/react2. Import the icon
Import the required icon at the top of the file.1import { Add } from '@ikono/react';3. Use the icon in the app
Simply add the icon to the component.
1import { Add, Minus } from '@ikono/react';
2
3export default function () {
4 return (
5 <div>
6 <Add />
7 <Minus />
8 </div>
9 );
10}
11 Customizing the icons
IKONO icons has been optimised to work at two different sizes: 24x24px and 20x20px. The smaller are more suitable for display within elements like buttons and badges. You can customise these using the size prop.
You can also adjust the colour to a specific colour or just use the current text colour.
Icon Props
| Prop | Type | Default | Description |
|---|---|---|---|
size? | "md" | "sm" | "md" | The size of the icon. |
className? | string | undefined | className passed to the underlying SVG. |
color? | string | "currentColor" | "currentColor" | A color formatted string used to change the colour of the icon. If set to "currentColor" then it will inherit the colour from the text colour. |
title? | string | undefined | An accessible description to pass to the icon. |
| Extends SVG props: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg | |||
Whats next?
Check out what else IKONO Icons has to offer.