Tag icon

Microsoft uses it to represent information tied to specific data. The Tag icon is tagged price, metadata and sort. Similar Fluent icons include Tag Circle, Tag Dismiss and Tag Error.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_tag_24_regular.svg

Tag icon in React

npm install @fluentui/react-icons

import { Tag24Regular } from "@fluentui/react-icons";

export function Example() {
  return <Tag24Regular aria-label="Tag" />;
}

Use the Tag icon in React

Import Tag24Regular and Tag24Filled from Microsoft's @fluentui/react-icons package; the code tabs above have this and other platforms. Coding agents can look the component up through the Fluent Icons MCP server.

Details

NameTag
StylesRegular (outlined), Filled, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_tag_24_regular.svg
Filled fileic_fluent_tag_24_filled.svg
React (Regular)Tag16Regular, Tag20Regular, Tag24Regular, Tag28Regular, Tag32Regular, Tag48Regular
React (Filled)Tag16Filled, Tag20Filled, Tag24Filled, Tag28Filled, Tag32Filled, Tag48Filled
React (Light)Tag32Light
Font glyph (Regular, 24 px)U+F77D · &#xF77D;
Font glyph (Filled, 24 px)U+F795 · &#xF795;
LicenseMIT (© Microsoft Corporation)

Keywords

priceinformationdetailmetadatapurchasesort

Also in Material Symbols

Tag iconTagGoogle's version of this icon, on Materialicons

Similar icons