Iconoir is an open-source library with 1500+ unique SVG icons, designed on a 24x24 pixels grid.
You can download any icon of the pack directly from https://iconoir.com or get them from this repository.
The icons are also available via the iconoir NPM package:
| npm | Yarn | pnpm | Bun |
|---|---|---|---|
npm i iconoir |
yarn add iconoir |
pnpm add iconoir |
bun add iconoir |
Example usage:
import Iconoir from 'iconoir/icons/iconoir.svg';A React library is available under the name iconoir-react.
For more details, see the package README.
A React Native library is available under the name iconoir-react-native.
For more details, see the package README.
A Vue library is available under the name @iconoir/vue.
For more details, see the package README.
A Flutter library is available under the name iconoir_flutter.
For more details, see the package README.
Iconoir is happily part of Framer.
To start using the icons: On the top menu, Insert > Graphics > Iconoir.
You can switch between icons from the right sidebar in the editor.
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).
The library is available in the Figma community here.
To add Iconoir-swift to your Xcode project, follow these steps:
- In Xcode, open your project and navigate to File > Swift Packages > Add Package Dependency...
- Enter the repository URL:
https://github.com/iconoir-icons/iconoir-swift.git - Choose the branch or version you want to add, and click Next.
- Select the target where you want to use the package, then click Finish.
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))
}
}MIT License.