# tailwindlabs/heroicons

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tailwindlabs-heroicons).**

23,357 stars · 1,319 forks · JavaScript · mit

## Links

- GitHub: https://github.com/tailwindlabs/heroicons
- Homepage: https://heroicons.com
- awesome-repositories: https://awesome-repositories.com/repository/tailwindlabs-heroicons.md

## Description

Heroicons is a collection of hand-crafted, scalable vector icons designed for use in web interfaces and digital product design systems. These graphical symbols are provided as a library of vector assets that integrate directly into user interface code to support visual communication and navigation.

The icons are defined as vector paths, allowing them to be embedded directly into the document object model. This approach enables the use of standard style rules to control appearance properties such as color and stroke width, ensuring visual consistency across different parts of an application.

The library supports a range of design and development workflows, including frontend prototyping, the maintenance of centralized design systems, and the creation of reusable web components. The assets are distributed as modular units compatible with modern web frameworks and build pipelines.

## Tags

### User Interface & Experience

- [Icon Libraries](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/icon-libraries.md) — Offers a collection of consistent, scalable vector icons designed for use in web interfaces.
- [Vector Icons](https://awesome-repositories.com/f/user-interface-experience/vector-icons.md) — Provides a comprehensive library of scalable vector icons for use in web interfaces and navigation. ([source](https://heroicons.com))
- [User Interface & Experience](https://awesome-repositories.com/f/user-interface-experience.md) — Enhances user interface design by providing consistent graphical symbols for improved navigation and visual communication.
- [Vector Graphic Assets](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-assets/vector-graphic-assets.md) — Supplies a library of high-quality, hand-crafted vector graphic assets for consistent styling across web applications.
- [UI Components](https://awesome-repositories.com/f/user-interface-experience/ui-components.md) — Provides graphical symbols that function as reusable UI components for visual communication and navigation.
- [Design System Managers](https://awesome-repositories.com/f/user-interface-experience/design-system-managers.md) — Facilitates the management and synchronization of consistent vector assets within centralized design systems.

### Part of an Awesome List

- [Icon Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/icon-libraries.md) — Hand-crafted SVG icons designed for Tailwind CSS.
- [Styling and Icons](https://awesome-repositories.com/f/awesome-lists/devtools/styling-and-icons.md) — Hand-crafted SVG icons for web projects.

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Uses scalable vector graphics defined in XML to ensure crisp display at any size.

### Web Development

- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Enables the creation of reusable UI components by integrating standardized vector icons into modular elements.
- [Precompiled Asset Distributions](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/precompiled-asset-distributions.md) — Provides modular, precompiled icon sets that integrate directly into modern web development build pipelines.