• Stars
    star
    21,279
  • Rank 1,153 (Top 0.03 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A set of free MIT-licensed high-quality SVG icons for UI development.

Heroicons Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Available as basic SVG icons and via first-party React and Vue libraries.

Browse at Heroicons.com β†’

Latest Release License

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="h-6 w-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="h-6 w-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, and the 20x20 solid icons can be imported from @heroicons/react/20/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

Note that this library currently only supports Vue 3.

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="h-6 w-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, and the 20x20 solid icons can be imported from @heroicons/vue/20/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.

More Repositories

1

tailwindcss

A utility-first CSS framework for rapid UI development.
TypeScript
81,562
star
2

headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
TypeScript
25,564
star
3

prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
TypeScript
5,382
star
4

tailwindcss-typography

Beautiful typographic defaults for HTML you don't control.
JavaScript
4,319
star
5

tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
HTML
4,137
star
6

tailwindcss.com

The Tailwind CSS documentation website.
MDX
3,233
star
7

tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
TypeScript
2,783
star
8

tailwindcss-jit

JavaScript
2,188
star
9

tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
JavaScript
1,553
star
10

tailwindcss-line-clamp

A plugin that provides utilities for visually truncating text after a fixed number of lines.
JavaScript
1,176
star
11

tailwindcss-container-queries

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
TypeScript
1,131
star
12

tailwindcss-aspect-ratio

JavaScript
956
star
13

designing-with-tailwindcss

Source code for the "Designing with Tailwind CSS" course.
CSS
712
star
14

heroicons.com

JavaScript
697
star
15

tailwindcss-setup-examples

675
star
16

tailwindui-vue

Deprecated, please use the Headless UI repo instead.
JavaScript
647
star
17

play.tailwindcss.com

JavaScript
638
star
18

tailwindcss-playground

HTML
516
star
19

tailwindui-react

Deprecated, please use the Headless UI repo instead.
TypeScript
433
star
20

tailwindcss-from-zero-to-production

Source code for the "Tailwind CSS Up and Running" screencast series.
JavaScript
379
star
21

blog.tailwindcss.com

JavaScript
342
star
22

tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233
star
23

webpack-starter

A quick and simple example of using Tailwind CSS with Webpack.
JavaScript
212
star
24

tailwindcss-plugin-examples

Examples to help you get started building your own Tailwind CSS plugins.
JavaScript
209
star
25

discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
171
star
26

tailwind-play-api

PHP
44
star
27

minimal-tailwind-postcss-plugin

A simple PostCSS plugin designed to cover all of the tricky integration points a build-tool needs to support for Tailwind CSS.
JavaScript
11
star
28

reproduction-headlessui-vue

JavaScript
9
star
29

reproduction-headlessui-react

JavaScript
1
star