Heroicons: High-Quality Open Source Icon Library 98

Heroicons is a high-quality open-source icon library, maintained in different versions by the Tailwind CSS team and the Refactoring UI team,

Heroicons is suitable for web and application development. All icons are based on the MIT license, allowing anyone to download and use them for free, in personal and commercial projects.

Heroicons Features

• High-quality SVG icons: Heroicons provides clear, consistent icon designs suitable for UI development, supporting web and application design.

• Two styles: Includes Outline and Solid styles to meet different design needs.

• Wide application: Icons cover common UI elements and business scenarios, suitable for navigation, operations, status indicators, etc.

• Easy integration: Supports using SVG code directly in HTML, as well as being used as components in modern front-end frameworks such as React and Vue after being installed via npm.

• Version updates: As versions iterate, the number of icons continues to increase, for example, some versions contain more than 1200 icons.

How to Use Heroicons

1. Installation:

• For front-end projects, you can install the Heroicons React or Vue library via npm or Yarn.

npm install @heroicons/react

# Or use Yarn

yarn add @heroicons/react

2. Importing Icons:

• In your code, you can directly import and use icons, for example:

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. Using SVG Directly:

• You can also directly copy SVG code from the Heroicons website into your HTML.

4. Figma Integration:

• Designers can use the Figma plugin or directly download SVG files for design work.

Heroicons not only provides icons in multiple styles but also supports icons in multiple sizes to adapt to different design needs. Users can choose icons in different sizes such as 24x24, 20x20, etc., according to the specific requirements of their projects. In addition, Heroicons' icon design style is simple and modern, suitable for various types of applications and websites, especially when combined with Tailwind CSS, which can achieve better visual effects and user experience.

The Heroicons icon library is constantly being updated. Developers can follow its GitHub page to get the latest icon and feature updates.

Github：https://github.com/tailwindlabs/heroicons