tags icon

Tags: tag list, manage tags, all tags, tag manager. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.214 6.706C14.324 6.959 14.379 7.224 14.379 7.5C14.379 7.776 14.324 8.041 14.214 8.294C14.113 8.528 13.973 8.734 13.793 8.914L10.914 11.793C10.734 11.973 10.528 12.113 10.294 12.214C10.041 12.324 9.776 12.379 9.5 12.379C9.224 12.379 8.959 12.324 8.706 12.214C8.472 12.113 8.266 11.973 8.086 11.793L3.854 7.561C3.58 7.287 3.37 6.972 3.222 6.615C3.074 6.258 3 5.886 3 5.5L3 3C3 2.746 3.047 2.5 3.14 2.264C3.242 2.007 3.391 1.781 3.586 1.586C3.781 1.391 4.007 1.242 4.264 1.14C4.5 1.047 4.746 1 5 1L7.5 1C7.886 1 8.258 1.074 8.615 1.222C8.972 1.37 9.287 1.58 9.561 1.854L13.793 6.086C13.973 6.266 14.113 6.472 14.214 6.706ZM4.146 6.233C4.243 6.467 4.381 6.674 4.561 6.854L8.793 11.086C8.988 11.281 9.224 11.379 9.5 11.379C9.776 11.379 10.012 11.281 10.207 11.086L13.086 8.207C13.281 8.012 13.379 7.776 13.379 7.5C13.379 7.224 13.281 6.988 13.086 6.793L8.854 2.561C8.674 2.381 8.467 2.243 8.233 2.146C7.998 2.049 7.754 2 7.5 2L5 2C4.724 2 4.488 2.098 4.293 2.293C4.098 2.488 4 2.724 4 3L4 5.5C4 5.754 4.049 5.998 4.146 6.233ZM7.854 14.146C7.953 14.246 8.003 14.364 8.003 14.5C8.003 14.636 7.953 14.754 7.854 14.854C7.756 14.951 7.638 15 7.5 15C7.362 15 7.244 14.951 7.146 14.854L1.146 8.854C1.049 8.756 1 8.638 1 8.5L1 4.5C1 4.359 1.048 4.241 1.144 4.144C1.241 4.048 1.359 4 1.5 4C1.641 4 1.759 4.048 1.856 4.144C1.952 4.241 2 4.359 2 4.5L2 8.293L7.854 14.146ZM7.707 4.293C7.902 4.488 8 4.724 8 5C8 5.276 7.902 5.512 7.707 5.707C7.512 5.902 7.276 6 7 6C6.724 6 6.488 5.902 6.293 5.707C6.098 5.512 6 5.276 6 5C6 4.724 6.098 4.488 6.293 4.293C6.488 4.098 6.724 4 7 4C7.276 4 7.512 4.098 7.707 4.293Z"/></svg>

React

// Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags
import type { SVGProps } from 'react';

export function TagsIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14.214 6.706C14.324 6.959 14.379 7.224 14.379 7.5C14.379 7.776 14.324 8.041 14.214 8.294C14.113 8.528 13.973 8.734 13.793 8.914L10.914 11.793C10.734 11.973 10.528 12.113 10.294 12.214C10.041 12.324 9.776 12.379 9.5 12.379C9.224 12.379 8.959 12.324 8.706 12.214C8.472 12.113 8.266 11.973 8.086 11.793L3.854 7.561C3.58 7.287 3.37 6.972 3.222 6.615C3.074 6.258 3 5.886 3 5.5L3 3C3 2.746 3.047 2.5 3.14 2.264C3.242 2.007 3.391 1.781 3.586 1.586C3.781 1.391 4.007 1.242 4.264 1.14C4.5 1.047 4.746 1 5 1L7.5 1C7.886 1 8.258 1.074 8.615 1.222C8.972 1.37 9.287 1.58 9.561 1.854L13.793 6.086C13.973 6.266 14.113 6.472 14.214 6.706ZM4.146 6.233C4.243 6.467 4.381 6.674 4.561 6.854L8.793 11.086C8.988 11.281 9.224 11.379 9.5 11.379C9.776 11.379 10.012 11.281 10.207 11.086L13.086 8.207C13.281 8.012 13.379 7.776 13.379 7.5C13.379 7.224 13.281 6.988 13.086 6.793L8.854 2.561C8.674 2.381 8.467 2.243 8.233 2.146C7.998 2.049 7.754 2 7.5 2L5 2C4.724 2 4.488 2.098 4.293 2.293C4.098 2.488 4 2.724 4 3L4 5.5C4 5.754 4.049 5.998 4.146 6.233ZM7.854 14.146C7.953 14.246 8.003 14.364 8.003 14.5C8.003 14.636 7.953 14.754 7.854 14.854C7.756 14.951 7.638 15 7.5 15C7.362 15 7.244 14.951 7.146 14.854L1.146 8.854C1.049 8.756 1 8.638 1 8.5L1 4.5C1 4.359 1.048 4.241 1.144 4.144C1.241 4.048 1.359 4 1.5 4C1.641 4 1.759 4.048 1.856 4.144C1.952 4.241 2 4.359 2 4.5L2 8.293L7.854 14.146ZM7.707 4.293C7.902 4.488 8 4.724 8 5C8 5.276 7.902 5.512 7.707 5.707C7.512 5.902 7.276 6 7 6C6.724 6 6.488 5.902 6.293 5.707C6.098 5.512 6 5.276 6 5C6 4.724 6.098 4.488 6.293 4.293C6.488 4.098 6.724 4 7 4C7.276 4 7.512 4.098 7.707 4.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/tags.md

Svelte

Svelte: see /icons/tags.md

HTML img

HTML img: see /icons/tags.md

CSS

CSS: see /icons/tags.md

Data URL

Data URL: see /icons/tags.md

Sprite

Sprite: see /icons/tags.md

SwiftUI

SwiftUI: see /icons/tags.md

Compose

Compose: see /icons/tags.md

Android XML

Android XML: see /icons/tags.md

Flutter

Flutter: see /icons/tags.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

tag list, manage tags, all tags, tag manager

Alternatives

tag: a single tag or label

Also fits

tag: a tag list or tag manager

Tags

tags, labels, categories, tagging, multiple-tags, organize, classify

Category

Shopping

Component name

TagsIcon

History

2026-10-15 added

Family 7

tag tag-off tag-pencil tag-percent tag-plus tag-sparkle tag-x

More shopping icons

barcode cash-register gem gift gift-check handbag hanger package package-alert package-arrow-down package-arrow-right package-arrow-up package-check package-clock package-off package-pencil · all shopping icons

For agents

Metadata: /icons/tags.json · Markdown: /icons/tags.md · SVG: https://gentleface.com/svg/{style}/16/tags.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/tags.png

tags icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp