Top Related Projects
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
The iconic SVG, font, and CSS toolkit
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Material Design icons by Google (Material Symbols)
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Quick Overview
Heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. Created by the makers of Tailwind CSS, it offers a comprehensive collection of icons in outline and solid styles, designed to be easily customizable and integrated into various web development workflows.
Pros
- Large collection of well-designed, consistent icons
- Available in both outline and solid styles
- Easy to use and customize with CSS
- Regularly updated with new icons
Cons
- Limited to two styles (outline and solid)
- May not have every specific icon needed for niche projects
- Requires additional setup for React or Vue integration
- File size can be an issue if using many icons
Code Examples
- Using Heroicons in HTML:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
- Using Heroicons with React:
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="h-6 w-6 text-blue-500" />
<p>...</p>
</div>
)
}
- Customizing Heroicons with CSS:
<style>
.icon-large {
width: 3rem;
height: 3rem;
stroke: #4a5568;
stroke-width: 1;
}
</style>
<svg class="icon-large" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Getting Started
To use Heroicons in your project:
- Visit the Heroicons website
- Browse and select the icon you want to use
- Copy the SVG code for the selected icon
- Paste the SVG code into your HTML
For React or Vue projects, install the package:
npm install @heroicons/react
# or
yarn add @heroicons/react
Then import and use the icons in your components as shown in the React example above.
Competitor Comparisons
Simply beautiful open-source icons
Pros of Feather
- Larger icon set with over 280 icons compared to Heroicons' 220+
- Simpler and more minimalistic design style
- Available in multiple file formats (SVG, PNG, and icon font)
Cons of Feather
- Less frequent updates and maintenance
- Fewer customization options out of the box
- Limited to a single weight (regular), while Heroicons offers solid and outline variants
Code Comparison
Feather usage:
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
Heroicons usage:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 ..." />
</svg>
Both libraries offer easy integration, but Feather requires a JavaScript call to replace icons, while Heroicons can be used directly as inline SVGs. Heroicons provides more flexibility in terms of styling and customization within the SVG structure.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Larger icon set with over 500 icons
- Tighter integration with GitHub's design system
- Multiple file formats available (SVG, PNG, WebFont)
Cons of Octicons
- Less customization options for individual icons
- Primarily designed for GitHub's ecosystem, may not fit all projects
- Slightly more complex implementation process
Code Comparison
Heroicons usage:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Octicons usage:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path fill-rule="evenodd" d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z"/>
</svg>
Both repositories offer high-quality, open-source icon sets for web projects. Heroicons focuses on simplicity and ease of use, while Octicons provides a more extensive set of icons tailored for GitHub's design language. Choose based on your project's specific needs and design preferences.
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Larger icon library with over 7,000 icons
- Includes both free and paid premium icons
- Supports multiple file formats (SVG, webfonts, etc.)
Cons of Font-Awesome
- Larger file size due to extensive icon set
- Steeper learning curve for implementation
- Some advanced features require paid plans
Code Comparison
Font-Awesome (using webfont):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-user"></i>
Heroicons (using SVG):
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Summary
Font-Awesome offers a vast icon library with multiple format options, making it suitable for various projects. However, it comes with a larger file size and potential complexity. Heroicons provides a simpler, more focused set of SVG icons, which can be easier to implement and customize but may have limited options compared to Font-Awesome's extensive collection.
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- Larger icon set with over 1,200 icons compared to Heroicons' 450+
- Supports multiple icon styles (outline, filled, sharp) for greater versatility
- Includes a custom SVG icon framework for easier integration and manipulation
Cons of Ionicons
- Larger file size due to the extensive icon set, potentially impacting load times
- Less focused on minimalist design, which may not suit all projects
- Steeper learning curve for utilizing the custom SVG framework
Code Comparison
Heroicons usage:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Ionicons usage:
<ion-icon name="add-outline"></ion-icon>
Both libraries offer easy-to-use icon implementations, but Ionicons provides a more concise syntax through its custom elements. Heroicons relies on standard SVG markup, offering more direct control over icon properties.
While Heroicons focuses on a curated set of essential icons with a consistent style, Ionicons provides a broader range of options and styles to choose from. The choice between the two depends on project requirements, design preferences, and performance considerations.
Material Design icons by Google (Material Symbols)
Pros of Material Design Icons
- Extensive library with over 2,000 icons in various styles and themes
- Consistent design language aligned with Google's Material Design principles
- Available in multiple formats (SVG, PNG, font) for versatile usage
Cons of Material Design Icons
- Larger file size due to the extensive collection, potentially impacting load times
- Less frequent updates compared to Heroicons
- May require additional setup or dependencies for optimal usage in some frameworks
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Heroicons:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
Summary
Material Design Icons offers a vast collection of icons with a consistent design language, while Heroicons provides a more streamlined and easily customizable set. The choice between the two depends on project requirements, design preferences, and performance considerations.
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,400 icons compared to Heroicons' 450+
- Offers multiple styles (outline, filled, and more) for each icon
- Provides SVG sprite option for easier implementation
Cons of Tabler Icons
- Less integration with Tailwind CSS framework
- May have inconsistencies in design due to the larger set
- Potentially slower load times due to the larger library size
Code Comparison
Heroicons usage:
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
Tabler Icons usage:
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" 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"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
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
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.
Basic Usage
The quickest way to use these icons is to simply copy the source for the icon you need from heroicons.com and inline it directly into your HTML:
<svg
class="size-6 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
Both icon styles are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like text-gray-500 in a framework like Tailwind CSS.
React
First, install @heroicons/react from npm:
npm install @heroicons/react
Now each icon can be imported individually as a React component:
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="size-6 text-blue-500" />
<p>...</p>
</div>
)
}
The 24x24 outline icons can be imported from @heroicons/react/24/outline, the 24x24 solid icons can be imported from @heroicons/react/24/solid, the 20x20 solid icons can be imported from @heroicons/react/20/solid, and 16x16 solid icons can be imported from @heroicons/react/16/solid.
Icons use an upper camel case naming convention and are always suffixed with the word Icon.
Browse the full list of icon names on UNPKG →
Vue
First, install @heroicons/vue from npm:
npm install @heroicons/vue
Now each icon can be imported individually as a Vue component:
<template>
<div>
<BeakerIcon class="size-6 text-blue-500" />
<p>...</p>
</div>
</template>
<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
The 24x24 outline icons can be imported from @heroicons/vue/24/outline, the 24x24 solid icons can be imported from @heroicons/vue/24/solid, the 20x20 solid icons can be imported from @heroicons/vue/20/solid, and the 16x16 solid icons can be imported from @heroicons/vue/16/solid.
Icons use an upper camel case naming convention and are always suffixed with the word Icon.
Browse the full list of icon names on UNPKG →
Contributing
While we absolutely appreciate anyone's willingness to try and improve the project, we're currently only interested in contributions that fix bugs, for example things like incorrect TypeScript types, or fixing an icon that's been exported with a fill instead of a stroke, etc.
We're not accepting contributions for new icons or adding support for other frameworks like Svelte or SolidJS. Instead we encourage you to release your own icons in your own library, and create your own packages for any other frameworks you'd like to see supported.
License
This library is MIT licensed.
Top Related Projects
Simply beautiful open-source icons
A scalable set of icons handcrafted with <3 by GitHub
The iconic SVG, font, and CSS toolkit
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Material Design icons by Google (Material Symbols)
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
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