JSPM

  • Created
  • Published
  • Downloads 9206
  • Score
    100M100P100Q152411F
  • License MIT

The biggest open source icon library with tons of free icons.

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (iconoir) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    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.

    Browse at iconoir.com →

    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