iconoir
An open source icons library with 1500+ icons, supporting React, React Native, Flutter, Vue, Figma, and Framer.
Top Related Projects
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
The iconic SVG, font, and CSS toolkit
Material Design icons by Google (Material Symbols)
Quick Overview
Iconoir is an open-source library of SVG icons designed for use in web and mobile applications. It offers a diverse collection of over 1,000 carefully crafted icons, all available for free and without attribution requirements. The icons are designed with consistency and simplicity in mind, making them suitable for various design projects.
Pros
- Large collection of over 1,000 icons covering a wide range of categories
- Free to use and open-source, with no attribution required
- Consistent design style across all icons
- Available in multiple formats (SVG, React, Vue, Flutter)
Cons
- Limited customization options compared to some paid icon libraries
- May lack some highly specific or niche icons
- Updates and additions to the library may be less frequent than commercial alternatives
Code Examples
Since Iconoir is primarily an icon library and not a code library, there are no specific code examples to provide. However, the icons can be easily integrated into various projects using different methods, such as direct SVG usage or through framework-specific components.
Getting Started
To use Iconoir icons in your project, follow these steps:
- Visit the official Iconoir website: https://iconoir.com/
- Browse or search for the desired icon
- Click on the icon to view download options
- Choose your preferred format (SVG, React, Vue, or Flutter)
- Download the icon or copy the code snippet
- Integrate the icon into your project using the appropriate method for your chosen format
For example, to use an SVG icon directly in HTML:
<img src="path/to/downloaded/icon.svg" alt="Icon description">
Or, to use a React component:
import { IconName } from 'iconoir-react'
function MyComponent() {
return (
<div>
<IconName />
</div>
)
}
Remember to install the necessary package if using framework-specific components (e.g., npm install iconoir-react for React).
Competitor Comparisons
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- Larger icon set with over 3,500 icons, offering more variety
- Includes both stroke and solid icon styles for greater flexibility
- Provides a user-friendly web interface for easy icon browsing and selection
Cons of Tabler Icons
- Larger file size due to the extensive icon set, potentially impacting load times
- Less frequent updates compared to Iconoir
- May require more time to find specific icons due to the larger collection
Code Comparison
Iconoir usage:
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Tabler Icons usage:
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
</svg>
Both repositories offer high-quality SVG icons, but they differ in their approach to icon design and implementation. Choose based on your specific project needs and preferences.
Simply beautiful open-source icons
Pros of Feather
- Larger community and more widespread adoption
- Simpler and more minimalistic design aesthetic
- Better documentation and usage guidelines
Cons of Feather
- Fewer icons available (287 vs. 1000+ in Iconoir)
- Less frequent updates and new icon additions
- Limited customization options compared to Iconoir
Code Comparison
Feather:
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
Iconoir:
<iconoir-circle></iconoir-circle>
<script type="module">
import 'iconoir/iconoir-circle'
</script>
Both icon libraries offer easy integration into web projects, but they differ in implementation. Feather uses a more traditional approach with a single script to replace icons, while Iconoir leverages web components for individual icon imports.
Feather's simplicity may be preferred for smaller projects, while Iconoir's modular approach can be beneficial for larger applications where selective icon loading is desired.
Overall, Feather is a solid choice for those seeking a well-established, minimalist icon set, while Iconoir offers a more extensive and customizable collection with modern web technologies.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Officially maintained by GitHub, ensuring consistency with their platform
- Extensive set of icons specifically designed for developer-focused interfaces
- Well-documented API and usage guidelines
Cons of Octicons
- Limited to GitHub's design language, which may not suit all projects
- Fewer icon options compared to more general-purpose icon libraries
- Primarily focused on web and UI development, less versatile for other use cases
Code Comparison
Octicons usage:
<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
Iconoir usage:
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
<path d="M16 22.027v-2.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7a5.44 5.44 0 00-1.5-3.75 5.07 5.07 0 00-.09-3.77s-1.18-.35-3.91 1.48a13.38 13.38 0 00-7 0c-2.73-1.83-3.91-1.48-3.91-1.48A5.07 5.07 0 005 5.797a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7a3.37 3.37 0 00-.94 2.58v2.87M9 20.027c-3 .973-5.5 0-7-3" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- Larger icon set with over 1,300 icons compared to Iconoir's 1,200+
- Supports multiple file formats (SVG, WebFont, PNG, and more)
- Integrated with popular frameworks like Angular, React, and Vue
Cons of Ionicons
- Larger file size due to the extensive icon set
- Less frequent updates compared to Iconoir's regular releases
- More complex integration process for some frameworks
Code Comparison
Iconoir usage:
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Ionicons usage:
<ion-icon name="circle-outline"></ion-icon>
Both icon libraries offer high-quality, customizable SVG icons for web projects. Iconoir focuses on simplicity and regular updates, while Ionicons provides a more extensive set of icons with broader framework support. The choice between them depends on specific project requirements and integration preferences.
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Larger icon set with over 7,000 icons
- Well-established and widely adopted in web development
- Offers both free and paid versions with additional features
Cons of Font-Awesome
- Larger file size due to extensive icon set
- Some advanced features require a paid subscription
- More complex implementation for custom icon subsets
Code Comparison
Iconoir usage:
<svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Font-Awesome usage:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<i class="fas fa-circle"></i>
Iconoir focuses on providing SVG icons with customizable attributes, while Font-Awesome offers a more straightforward implementation using CSS classes. Font-Awesome's extensive library and established presence make it a popular choice for many developers, but Iconoir's lightweight approach and modern SVG format appeal to those seeking simplicity and flexibility in icon implementation.
Material Design icons by Google (Material Symbols)
Pros of Material Design Icons
- Extensive collection with over 2,000 icons in various styles and themes
- Official Google design system, ensuring consistency with Android and other Google products
- Well-documented and widely supported across different platforms and frameworks
Cons of Material Design Icons
- Large file size due to the extensive collection, which may impact load times
- Less frequent updates compared to some community-driven icon sets
- Some icons may feel too "Google-centric" for projects aiming for a unique visual identity
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Iconoir:
<script src="https://cdn.jsdelivr.net/npm/iconoir@6.11.0/icons/iconoir.js"></script>
<i-iconoir name="heart"></i>
Summary
Material Design Icons offers a comprehensive set of icons with strong Google ecosystem integration, while Iconoir provides a more lightweight and customizable alternative. Material Design Icons excels in consistency and documentation, but may be overkill for smaller projects. Iconoir offers a fresh, modern look with easier customization, but has a smaller icon set. The choice between the two depends on project requirements, design preferences, and ecosystem compatibility.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Iconoir
What is Iconoir?
Iconoir is an open-source library with 1500+ unique SVG icons, designed on a 24x24 pixels grid.
Basic Usage
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';
React
A React library is available under the name iconoir-react.
For more details, see the package README.
React Native
A React Native library is available under the name iconoir-react-native.
For more details, see the package README.
Vue
A Vue library is available under the name @iconoir/vue.
For more details, see the package README.
Flutter
A Flutter library is available under the name iconoir_flutter.
For more details, see the package README.
Framer
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.
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.
Swift Package
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.
UIKit
import UIKit
import Iconoir
let imageView = UIImageView(image: Iconoir.bell.asUIImage)
SwiftUI
import SwiftUI
import Iconoir
struct ContentView: View {
var body: some View {
Iconoir.bell.asImage
.foregroundColor(.blue)
.font(.system(size: 24))
}
}
License
MIT License.
Top Related Projects
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
The iconic SVG, font, and CSS toolkit
Material Design icons by Google (Material Symbols)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot