2021-05-11 12:08:03 +02:00
< p align = "center" >
2022-03-17 11:53:45 +01:00
< img src = "assets/iconoir-cover.png" alt = "Iconoir" >
2021-05-11 12:08:03 +02:00
< / p >
2021-05-04 12:55:15 +02:00
< p align = "center" >
2022-04-25 11:49:58 +02:00
Iconoir is an open-source library with 1000+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
2021-05-04 12:55:15 +02:00
< p >
< p align = "center" >
< a href = "https://iconoir.com" > < strong > Browse at iconoir.com → < / strong > < / a >
< / p >
2021-06-14 11:41:47 +02:00
< p align = "center" >
2021-07-05 17:46:14 +02:00
< a href = "https://github.com/lucaburgio/iconoir/releases" >
< img src = "https://img.shields.io/github/v/release/lucaburgio/iconoir?style=flat-square" alt = "Version" >
2021-06-14 11:41:47 +02:00
< / a >
< a href = "https://github.com/lucaburgio/iconoir" >
< img src = "https://img.shields.io/github/stars/lucaburgio/iconoir?style=flat-square" alt = "Project Stars" >
< / a >
2022-04-02 11:17:51 +02:00
< a href = "https://www.npmjs.com/package/iconoir-react" >
< img src = "https://img.shields.io/npm/dm/iconoir-react?color=98E8F3&label=react&style=flat-square" alt = "React Library" >
< / a >
2021-06-14 11:41:47 +02:00
< a href = "https://github.com/lucaburgio/iconoir/blob/master/LICENSE" >
< img src = "https://img.shields.io/github/license/lucaburgio/iconoir?style=flat-square" alt = "License" >
< / a >
< / p >
2021-05-04 12:55:15 +02:00
## Basic Usage
2021-07-05 18:38:43 +02:00
You can download any icon of the pack directly from https://iconoir.com or get them from this repository.
Additionally, the icons are available via the `iconoir` NPM package:
```bash
yarn add iconoir
# or
npm i iconoir
```
Example usage:
```js
import Iconoir from 'iconoir/icons/iconoir.svg'
```
2021-05-04 12:55:15 +02:00
2021-06-27 12:26:06 +02:00
## React
A React library is available to install under the name `iconoir-react` . For more details, see the package [README ](./packages/iconoir-react ).
2021-07-05 16:50:10 +02:00
## React Native
A React Native library is available to install under the name `iconoir-react-native` . For more details, see the package [README ](./packages/iconoir-react-native ).
2022-07-05 18:26:51 +02:00
## Flutter
A Flutter library is available to install under the name `iconoir_flutter` . For more details, see the package [README ](./packages/iconoir-flutter ).
2021-06-27 12:26:06 +02:00
## Framer
Iconoir is happily part of [Framer ](https://framer.com ) now. To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir` .
You can switch between icons from the right sidebar in the editor.
2021-07-14 12:08:25 +02:00
## CSS
2021-05-16 09:58:53 +02:00
2021-06-26 16:34:56 +02:00
Import the CSS File:
```html
2021-08-21 00:32:16 +02:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css" >
2021-06-26 16:34:56 +02:00
```
2021-05-16 09:58:53 +02:00
Here is an example in HTML:
2021-05-04 12:55:15 +02:00
2021-06-26 16:34:56 +02:00
```html
2021-07-14 12:08:25 +02:00
< i class = "iconoir-hand-brake" > < / i >
2021-05-16 09:58:53 +02:00
```
2021-06-26 16:44:02 +02:00
The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons [here ](https://iconoir.com ).
2021-06-26 16:34:56 +02:00
2021-06-06 08:19:33 +02:00
## Figma
The library is available in the Figma community [here ](https://www.figma.com/community/file/983248991460488027/Iconoir-Pack ).
2021-05-04 12:55:15 +02:00
## License
2021-05-06 14:22:47 +02:00
MIT License