# tags icon Tags. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/tags - Category: Shopping - Use it for: tag list, manage tags, all tags, tag manager - Tags: tags, labels, categories, tagging, multiple-tags, organize, classify - Family: tag, tag-off, tag-pencil, tag-percent, tag-plus, tag-sparkle, tag-x - Component name: TagsIcon - Added: 2026-10-15 ## Alternatives - `tag`: a single tag or label ## Also fits - tag: a tag list or tag manager ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/tags.svg · PNG https://gentleface.com/png/line-round/16/tags.png · https://gentleface.com/png/line-round/32/tags.png · https://gentleface.com/png/line-round/48/tags.png - line-soft: https://gentleface.com/svg/line-soft/16/tags.svg · PNG https://gentleface.com/png/line-soft/16/tags.png · https://gentleface.com/png/line-soft/32/tags.png · https://gentleface.com/png/line-soft/48/tags.png - line-sharp: https://gentleface.com/svg/line-sharp/16/tags.svg · PNG https://gentleface.com/png/line-sharp/16/tags.png · https://gentleface.com/png/line-sharp/32/tags.png · https://gentleface.com/png/line-sharp/48/tags.png - solid-round: https://gentleface.com/svg/solid-round/16/tags.svg · PNG https://gentleface.com/png/solid-round/16/tags.png · https://gentleface.com/png/solid-round/32/tags.png · https://gentleface.com/png/solid-round/48/tags.png - solid-soft: https://gentleface.com/svg/solid-soft/16/tags.svg · PNG https://gentleface.com/png/solid-soft/16/tags.png · https://gentleface.com/png/solid-soft/32/tags.png · https://gentleface.com/png/solid-soft/48/tags.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/tags.svg · PNG https://gentleface.com/png/solid-sharp/16/tags.png · https://gentleface.com/png/solid-sharp/32/tags.png · https://gentleface.com/png/solid-sharp/48/tags.png The SVG of every style: https://gentleface.com/icons/tags.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags import type { SVGProps } from 'react'; export function TagsIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags. Takes the text color. */ .icon-tags { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags import SwiftUI struct TagsIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.214, y: 6.706)) p.addCurve(to: CGPoint(x: 14.379, y: 7.5), control1: CGPoint(x: 14.324, y: 6.959), control2: CGPoint(x: 14.379, y: 7.224)) p.addCurve(to: CGPoint(x: 14.214, y: 8.294), control1: CGPoint(x: 14.379, y: 7.776), control2: CGPoint(x: 14.324, y: 8.041)) p.addCurve(to: CGPoint(x: 13.793, y: 8.914), control1: CGPoint(x: 14.113, y: 8.528), control2: CGPoint(x: 13.973, y: 8.734)) p.addLine(to: CGPoint(x: 10.914, y: 11.793)) p.addCurve(to: CGPoint(x: 10.294, y: 12.214), control1: CGPoint(x: 10.734, y: 11.973), control2: CGPoint(x: 10.528, y: 12.113)) p.addCurve(to: CGPoint(x: 9.5, y: 12.379), control1: CGPoint(x: 10.041, y: 12.324), control2: CGPoint(x: 9.776, y: 12.379)) p.addCurve(to: CGPoint(x: 8.706, y: 12.214), control1: CGPoint(x: 9.224, y: 12.379), control2: CGPoint(x: 8.959, y: 12.324)) p.addCurve(to: CGPoint(x: 8.086, y: 11.793), control1: CGPoint(x: 8.472, y: 12.113), control2: CGPoint(x: 8.266, y: 11.973)) p.addLine(to: CGPoint(x: 3.854, y: 7.561)) p.addCurve(to: CGPoint(x: 3.222, y: 6.615), control1: CGPoint(x: 3.58, y: 7.287), control2: CGPoint(x: 3.37, y: 6.972)) p.addCurve(to: CGPoint(x: 3, y: 5.5), control1: CGPoint(x: 3.074, y: 6.258), control2: CGPoint(x: 3, y: 5.886)) p.addLine(to: CGPoint(x: 3, y: 3)) p.addCurve(to: CGPoint(x: 3.14, y: 2.264), control1: CGPoint(x: 3, y: 2.746), control2: CGPoint(x: 3.047, y: 2.5)) p.addCurve(to: CGPoint(x: 3.586, y: 1.586), control1: CGPoint(x: 3.242, y: 2.007), control2: CGPoint(x: 3.391, y: 1.781)) p.addCurve(to: CGPoint(x: 4.264, y: 1.14), control1: CGPoint(x: 3.781, y: 1.391), control2: CGPoint(x: 4.007, y: 1.242)) p.addCurve(to: CGPoint(x: 5, y: 1), control1: CGPoint(x: 4.5, y: 1.047), control2: CGPoint(x: 4.746, y: 1)) p.addLine(to: CGPoint(x: 7.5, y: 1)) p.addCurve(to: CGPoint(x: 8.615, y: 1.222), control1: CGPoint(x: 7.886, y: 1), control2: CGPoint(x: 8.258, y: 1.074)) p.addCurve(to: CGPoint(x: 9.561, y: 1.854), control1: CGPoint(x: 8.972, y: 1.37), control2: CGPoint(x: 9.287, y: 1.58)) p.addLine(to: CGPoint(x: 13.793, y: 6.086)) p.addCurve(to: CGPoint(x: 14.214, y: 6.706), control1: CGPoint(x: 13.973, y: 6.266), control2: CGPoint(x: 14.113, y: 6.472)) p.closeSubpath() p.move(to: CGPoint(x: 4.146, y: 6.233)) p.addCurve(to: CGPoint(x: 4.561, y: 6.854), control1: CGPoint(x: 4.243, y: 6.467), control2: CGPoint(x: 4.381, y: 6.674)) p.addLine(to: CGPoint(x: 8.793, y: 11.086)) p.addCurve(to: CGPoint(x: 9.5, y: 11.379), control1: CGPoint(x: 8.988, y: 11.281), control2: CGPoint(x: 9.224, y: 11.379)) p.addCurve(to: CGPoint(x: 10.207, y: 11.086), control1: CGPoint(x: 9.776, y: 11.379), control2: CGPoint(x: 10.012, y: 11.281)) p.addLine(to: CGPoint(x: 13.086, y: 8.207)) p.addCurve(to: CGPoint(x: 13.379, y: 7.5), control1: CGPoint(x: 13.281, y: 8.012), control2: CGPoint(x: 13.379, y: 7.776)) p.addCurve(to: CGPoint(x: 13.086, y: 6.793), control1: CGPoint(x: 13.379, y: 7.224), control2: CGPoint(x: 13.281, y: 6.988)) p.addLine(to: CGPoint(x: 8.854, y: 2.561)) p.addCurve(to: CGPoint(x: 8.233, y: 2.146), control1: CGPoint(x: 8.674, y: 2.381), control2: CGPoint(x: 8.467, y: 2.243)) p.addCurve(to: CGPoint(x: 7.5, y: 2), control1: CGPoint(x: 7.998, y: 2.049), control2: CGPoint(x: 7.754, y: 2)) p.addLine(to: CGPoint(x: 5, y: 2)) p.addCurve(to: CGPoint(x: 4.293, y: 2.293), control1: CGPoint(x: 4.724, y: 2), control2: CGPoint(x: 4.488, y: 2.098)) p.addCurve(to: CGPoint(x: 4, y: 3), control1: CGPoint(x: 4.098, y: 2.488), control2: CGPoint(x: 4, y: 2.724)) p.addLine(to: CGPoint(x: 4, y: 5.5)) p.addCurve(to: CGPoint(x: 4.146, y: 6.233), control1: CGPoint(x: 4, y: 5.754), control2: CGPoint(x: 4.049, y: 5.998)) p.closeSubpath() p.move(to: CGPoint(x: 7.854, y: 14.146)) p.addCurve(to: CGPoint(x: 8.003, y: 14.5), control1: CGPoint(x: 7.953, y: 14.246), control2: CGPoint(x: 8.003, y: 14.364)) p.addCurve(to: CGPoint(x: 7.854, y: 14.854), control1: CGPoint(x: 8.003, y: 14.636), control2: CGPoint(x: 7.953, y: 14.754)) p.addCurve(to: CGPoint(x: 7.5, y: 15), control1: CGPoint(x: 7.756, y: 14.951), control2: CGPoint(x: 7.638, y: 15)) p.addCurve(to: CGPoint(x: 7.146, y: 14.854), control1: CGPoint(x: 7.362, y: 15), control2: CGPoint(x: 7.244, y: 14.951)) p.addLine(to: CGPoint(x: 1.146, y: 8.854)) p.addCurve(to: CGPoint(x: 1, y: 8.5), control1: CGPoint(x: 1.049, y: 8.756), control2: CGPoint(x: 1, y: 8.638)) p.addLine(to: CGPoint(x: 1, y: 4.5)) p.addCurve(to: CGPoint(x: 1.144, y: 4.144), control1: CGPoint(x: 1, y: 4.359), control2: CGPoint(x: 1.048, y: 4.241)) p.addCurve(to: CGPoint(x: 1.5, y: 4), control1: CGPoint(x: 1.241, y: 4.048), control2: CGPoint(x: 1.359, y: 4)) p.addCurve(to: CGPoint(x: 1.856, y: 4.144), control1: CGPoint(x: 1.641, y: 4), control2: CGPoint(x: 1.759, y: 4.048)) p.addCurve(to: CGPoint(x: 2, y: 4.5), control1: CGPoint(x: 1.952, y: 4.241), control2: CGPoint(x: 2, y: 4.359)) p.addLine(to: CGPoint(x: 2, y: 8.293)) p.addLine(to: CGPoint(x: 7.854, y: 14.146)) p.closeSubpath() p.move(to: CGPoint(x: 7.707, y: 4.293)) p.addCurve(to: CGPoint(x: 8, y: 5), control1: CGPoint(x: 7.902, y: 4.488), control2: CGPoint(x: 8, y: 4.724)) p.addCurve(to: CGPoint(x: 7.707, y: 5.707), control1: CGPoint(x: 8, y: 5.276), control2: CGPoint(x: 7.902, y: 5.512)) p.addCurve(to: CGPoint(x: 7, y: 6), control1: CGPoint(x: 7.512, y: 5.902), control2: CGPoint(x: 7.276, y: 6)) p.addCurve(to: CGPoint(x: 6.293, y: 5.707), control1: CGPoint(x: 6.724, y: 6), control2: CGPoint(x: 6.488, y: 5.902)) p.addCurve(to: CGPoint(x: 6, y: 5), control1: CGPoint(x: 6.098, y: 5.512), control2: CGPoint(x: 6, y: 5.276)) p.addCurve(to: CGPoint(x: 6.293, y: 4.293), control1: CGPoint(x: 6, y: 4.724), control2: CGPoint(x: 6.098, y: 4.488)) p.addCurve(to: CGPoint(x: 7, y: 4), control1: CGPoint(x: 6.488, y: 4.098), control2: CGPoint(x: 6.724, y: 4)) p.addCurve(to: CGPoint(x: 7.707, y: 4.293), control1: CGPoint(x: 7.276, y: 4), control2: CGPoint(x: 7.512, y: 4.098)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // TagsIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val TagsIcon: ImageVector by lazy { ImageVector.Builder( name = "tags", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(TagsIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "tags" (line-round), MIT. https://gentleface.com/icons/tags import 'package:flutter/widgets.dart'; class TagsIcon extends StatelessWidget { const TagsIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _TagsIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _TagsIconPainter extends CustomPainter { _TagsIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.214, 6.706) ..cubicTo(14.324, 6.959, 14.379, 7.224, 14.379, 7.5) ..cubicTo(14.379, 7.776, 14.324, 8.041, 14.214, 8.294) ..cubicTo(14.113, 8.528, 13.973, 8.734, 13.793, 8.914) ..lineTo(10.914, 11.793) ..cubicTo(10.734, 11.973, 10.528, 12.113, 10.294, 12.214) ..cubicTo(10.041, 12.324, 9.776, 12.379, 9.5, 12.379) ..cubicTo(9.224, 12.379, 8.959, 12.324, 8.706, 12.214) ..cubicTo(8.472, 12.113, 8.266, 11.973, 8.086, 11.793) ..lineTo(3.854, 7.561) ..cubicTo(3.58, 7.287, 3.37, 6.972, 3.222, 6.615) ..cubicTo(3.074, 6.258, 3, 5.886, 3, 5.5) ..lineTo(3, 3) ..cubicTo(3, 2.746, 3.047, 2.5, 3.14, 2.264) ..cubicTo(3.242, 2.007, 3.391, 1.781, 3.586, 1.586) ..cubicTo(3.781, 1.391, 4.007, 1.242, 4.264, 1.14) ..cubicTo(4.5, 1.047, 4.746, 1, 5, 1) ..lineTo(7.5, 1) ..cubicTo(7.886, 1, 8.258, 1.074, 8.615, 1.222) ..cubicTo(8.972, 1.37, 9.287, 1.58, 9.561, 1.854) ..lineTo(13.793, 6.086) ..cubicTo(13.973, 6.266, 14.113, 6.472, 14.214, 6.706) ..close() ..moveTo(4.146, 6.233) ..cubicTo(4.243, 6.467, 4.381, 6.674, 4.561, 6.854) ..lineTo(8.793, 11.086) ..cubicTo(8.988, 11.281, 9.224, 11.379, 9.5, 11.379) ..cubicTo(9.776, 11.379, 10.012, 11.281, 10.207, 11.086) ..lineTo(13.086, 8.207) ..cubicTo(13.281, 8.012, 13.379, 7.776, 13.379, 7.5) ..cubicTo(13.379, 7.224, 13.281, 6.988, 13.086, 6.793) ..lineTo(8.854, 2.561) ..cubicTo(8.674, 2.381, 8.467, 2.243, 8.233, 2.146) ..cubicTo(7.998, 2.049, 7.754, 2, 7.5, 2) ..lineTo(5, 2) ..cubicTo(4.724, 2, 4.488, 2.098, 4.293, 2.293) ..cubicTo(4.098, 2.488, 4, 2.724, 4, 3) ..lineTo(4, 5.5) ..cubicTo(4, 5.754, 4.049, 5.998, 4.146, 6.233) ..close() ..moveTo(7.854, 14.146) ..cubicTo(7.953, 14.246, 8.003, 14.364, 8.003, 14.5) ..cubicTo(8.003, 14.636, 7.953, 14.754, 7.854, 14.854) ..cubicTo(7.756, 14.951, 7.638, 15, 7.5, 15) ..cubicTo(7.362, 15, 7.244, 14.951, 7.146, 14.854) ..lineTo(1.146, 8.854) ..cubicTo(1.049, 8.756, 1, 8.638, 1, 8.5) ..lineTo(1, 4.5) ..cubicTo(1, 4.359, 1.048, 4.241, 1.144, 4.144) ..cubicTo(1.241, 4.048, 1.359, 4, 1.5, 4) ..cubicTo(1.641, 4, 1.759, 4.048, 1.856, 4.144) ..cubicTo(1.952, 4.241, 2, 4.359, 2, 4.5) ..lineTo(2, 8.293) ..lineTo(7.854, 14.146) ..close() ..moveTo(7.707, 4.293) ..cubicTo(7.902, 4.488, 8, 4.724, 8, 5) ..cubicTo(8, 5.276, 7.902, 5.512, 7.707, 5.707) ..cubicTo(7.512, 5.902, 7.276, 6, 7, 6) ..cubicTo(6.724, 6, 6.488, 5.902, 6.293, 5.707) ..cubicTo(6.098, 5.512, 6, 5.276, 6, 5) ..cubicTo(6, 4.724, 6.098, 4.488, 6.293, 4.293) ..cubicTo(6.488, 4.098, 6.724, 4, 7, 4) ..cubicTo(7.276, 4, 7.512, 4.098, 7.707, 4.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_TagsIconPainter old) => old.color != color; } ```