Iconoir is an open-source icon library of more than 1,600 unique SVG icons drawn on a 24x24 pixel grid, published as npm packages, framework-specific libraries, a CSS file, a Figma community file, and a Framer graphics pack, and built for developers and designers who need one consistent icon set across code and design tools.

What it is

Iconoir is an MIT-licensed icon collection maintained in a TypeScript repository. Every icon is a unique SVG asset designed on a 24x24 pixel grid, and the full set can be browsed and downloaded from iconoir.com. The project sits in the npm and JavaScript ecosystem at its core, with the iconoir package as the base distribution, and then extends outward with dedicated packages for React, React Native, Vue, and Flutter, a Swift Package for Apple platforms, a CSS file, and integrations for Figma and Framer. The repository has accumulated 4,556 stars and 197 forks.

The concrete problem it solves is fragmentation of an icon set across platforms and tools. Rather than copying individual SVG files into each application or maintaining separate icon collections per framework, a team consumes the same pack through iconoir-react, iconoir-react-native, @iconoir/vue, iconoir_flutter, or Iconoir-swift, and designers work from the identical artwork in the Figma community library or the Framer graphics pack. For plain web pages without a build step, the project also ships a CSS file where icons are addressed by class name, with the class always beginning iconoir- followed by the icon name.

Key capabilities

• Over 1,600 unique SVG icons, all designed on a 24x24 pixel grid and browsable or downloadable at iconoir.com.
• Base npm distribution installable as npm i iconoir, yarn add iconoir, pnpm add iconoir, or bun add iconoir, with direct SVG imports such as import Iconoir from 'iconoir/icons/iconoir.svg'.
• Framework packages published under the names iconoir-react, iconoir-react-native, @iconoir/vue, and iconoir_flutter, each documented in its own package README.
• Swift Package Iconoir-swift, added in Xcode through File > Swift Packages > Add Package Dependency from https://github.com/iconoir-icons/iconoir-swift.git, with usage such as Iconoir.bell.asUIImage in UIKit and Iconoir.bell.asImage in SwiftUI.
• CSS consumption: import the stylesheet, apply the iconoir- class prefix, and control sizing through the element's ::before styles; icons are display: inline-block and default to the current font size, rendered as a mask.
• Framer integration available from the top menu at Insert > Graphics > Iconoir, with icons switched from the right sidebar in the editor.
• Figma library published to the Figma community, so design files use the same icon pack as the codebase.
• Community support through the project Discord server.

Who uses it and how

• React and React Native teams that install iconoir-react or iconoir-react-native and import icons directly into components.
• Cross-platform product teams that keep one visual language across a Vue web app using @iconoir/vue and a Flutter app using iconoir_flutter.
• Apple platform developers who add the Swift package to an Xcode project and reference icons in UIKit view code or SwiftUI views.
• Designers who work in Figma through the community library or in Framer through the graphics pack, keeping handoff aligned with the code packages.
• Static or server-rendered sites with no component build step, which import the CSS file and use iconoir- classes in markup.

Getting started

Install the base package with npm i iconoir, or the equivalent yarn, pnpm, or bun command, then import SVGs directly, or pick a framework package such as iconoir-react for component usage. Individual icons can also be downloaded from iconoir.com, and the CSS file can be included for a class-based HTML workflow.

How it compares

The facts provided do not name any comparable icon libraries or any paid products that Iconoir replaces, so it stands alone in this registry. Any comparison here would be against projects this page has no verified information about.

When to use it — and when not to

There is nothing to operate on the server side: Iconoir ships as static SVG files, packages, and a stylesheet, so a self-hoster runs no database, storage layer, or mail service. Teams that want a hosted icon API or a managed service with usage reporting should not pick it, because distribution is limited to files and packages. The project also carries 158 open issues, and the CSS route requires styling the ::before pseudo-element to change icon size, so teams wanting drop-in sizing without CSS work should weigh that.

import Iconoir from 'iconoir/icons/iconoir.svg';

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />

<i class="iconoir-hand-brake"></i>

import UIKit
import Iconoir

let imageView = UIImageView(image: Iconoir.bell.asUIImage)

import SwiftUI
import Iconoir

struct ContentView: View {
    var body: some View {
        Iconoir.bell.asImage
            .foregroundColor(.blue)
            .font(.system(size: 24))
    }
}