Skip to content
A set of free MIT-licensed high-quality SVG icons for UI development.
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add new icons Mar 27, 2020
dist Add new icons Mar 27, 2020
src Add new icons Mar 27, 2020
.gitignore Init Feb 24, 2020
LICENSE Create LICENSE Feb 24, 2020
README.md Add link to heroicons.dev in readme Mar 27, 2020
package.json Init Feb 24, 2020
svgo.outline.yaml Init Feb 24, 2020
svgo.solid.yaml Init Feb 24, 2020
yarn.lock Init Feb 24, 2020

README.md

Heroicons

A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.

140 icons per style currently, more to come in the future.

Preview and search at Heroicons.dev (Made by @codex-zaydek)

Outline style

24x24 icons drawn with a stroke.

Solid style

Smaller 20x20 icons drawn with fills.

Usage

To use these icons, simply copy the source for the icon you need 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"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    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.

You can’t perform that action at this time.