|
4 days ago | |
---|---|---|
.github | 2 months ago | |
assets | 7 months ago | |
bin | 1 week ago | |
css | 4 days ago | |
docs | 7 months ago | |
iconoir.com | 4 days ago | |
icons | 4 days ago | |
packages | 4 days ago | |
.eslintrc.cjs | 1 year ago | |
.gitignore | 2 years ago | |
.npmrc | 7 months ago | |
.prettierrc.json | 2 years ago | |
CODE_OF_CONDUCT.md | 2 years ago | |
CONTRIBUTING.md | 7 months ago | |
FUNDING.yml | 8 months ago | |
LICENSE | 2 years ago | |
README.md | 3 weeks ago | |
analysis_options.yaml | 9 months ago | |
constants.js | 1 week ago | |
meta-data.json | 4 days ago | |
package.json | 4 days ago | |
pnpm-lock.yaml | 2 months ago | |
pnpm-workspace.yaml | 7 months ago |
README.md
Iconoir
What is Iconoir?
Iconoir is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
Basic Usage
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:
yarn add iconoir
# or
npm i iconoir
Example usage:
import Iconoir from 'iconoir/icons/iconoir.svg'
React
A React library is available to install under the name iconoir-react
. For more details, see the package README.
React Native
A React Native library is available to install under the name iconoir-react-native
. For more details, see the package README.
Flutter
A Flutter library is available to install under the name iconoir_flutter
. For more details, see the package README.
Framer
Iconoir is happily part of Framer 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.
CSS
Import the CSS File:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
Here is an example in HTML:
<i class="iconoir-hand-brake"></i>
The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons here.
The icons are display: inline-block
and default to the current font size. You can control this
by adjusting the ::before
styles of the element (which is where the icons are added as a mask).
Figma
The library is available in the Figma community here.
License
MIT License