What is the tag icon used for?

It's used to visually represent labels, keywords, or categories for content.

How do I use the tag icon in React?

Import it using `import { TagIcon } from '@heroicons/react/24/outline'` and then use it as a component: ` `.

Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.

Heroicons · tag · MIT

The Heroicons tag icon visually represents a label or keyword, commonly used to categorize or identify content.

Install

npm i @heroicons/react

Import & render

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

<TagIcon className="size-6" />

Heroicons ships this icon in 4 styles — each its own import:

24/outline

<TagIcon className="size-6" />

24/solid

<TagIcon className="size-6" />

20/solid

<TagIcon className="size-6" />

16/solid

<TagIcon className="size-6" />

What is the tag icon used for?: It's used to visually represent labels, keywords, or categories for content.
How do I use the tag icon in React?: Import it using `import { TagIcon } from '@heroicons/react/24/outline'` and then use it as a component: `<TagIcon className="h-6 w-6" />`.
What is the license for Heroicons?: Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.

The same idea in other libraries, and near matches in Heroicons.

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →