# lock-tag icon Lock tag. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/lock-tag - Category: Security & privacy - Use it for: lockout tagout, loto, lockout - Example: Lockout-tagout before servicing a machine - Built from: lock + tag - Tags: padlock, security, tag - Family: lock, lock-check, lock-clock, lock-gear, lock-off, lock-open, lock-open-alert, lock-pencil - Component name: LockTagIcon - Added: 2026-11-07 - Since: version 0.5.0 - npm: `import { LockTagIcon } from '@gentleface/react';` (@gentleface/react 0.6.0) ## Files Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. - line-round: https://gentleface.com/svg/line-round/16/lock-tag.svg · PNG https://gentleface.com/png/line-round/16/lock-tag.png · https://gentleface.com/png/line-round/32/lock-tag.png · https://gentleface.com/png/line-round/48/lock-tag.png - line-soft: https://gentleface.com/svg/line-soft/16/lock-tag.svg · PNG https://gentleface.com/png/line-soft/16/lock-tag.png · https://gentleface.com/png/line-soft/32/lock-tag.png · https://gentleface.com/png/line-soft/48/lock-tag.png - line-sharp: https://gentleface.com/svg/line-sharp/16/lock-tag.svg · PNG https://gentleface.com/png/line-sharp/16/lock-tag.png · https://gentleface.com/png/line-sharp/32/lock-tag.png · https://gentleface.com/png/line-sharp/48/lock-tag.png - solid-round: https://gentleface.com/svg/solid-round/16/lock-tag.svg · PNG https://gentleface.com/png/solid-round/16/lock-tag.png · https://gentleface.com/png/solid-round/32/lock-tag.png · https://gentleface.com/png/solid-round/48/lock-tag.png - solid-soft: https://gentleface.com/svg/solid-soft/16/lock-tag.svg · PNG https://gentleface.com/png/solid-soft/16/lock-tag.png · https://gentleface.com/png/solid-soft/32/lock-tag.png · https://gentleface.com/png/solid-soft/48/lock-tag.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/lock-tag.svg · PNG https://gentleface.com/png/solid-sharp/16/lock-tag.png · https://gentleface.com/png/solid-sharp/32/lock-tag.png · https://gentleface.com/png/solid-sharp/48/lock-tag.png The SVG of every style: https://gentleface.com/icons/lock-tag.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 "lock-tag" (line-round), MIT. https://gentleface.com/icons/lock-tag import type { SVGProps } from 'react'; export function LockTagIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "lock-tag" (line-round), MIT. https://gentleface.com/icons/lock-tag. Takes the text color. */ .icon-lock-tag { 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='M5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L2 7L2 11L5.5 11C5.641 11 5.759 11.048 5.856 11.144C5.952 11.241 6 11.359 6 11.5C6 11.641 5.952 11.759 5.856 11.856C5.759 11.952 5.641 12 5.5 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6L3 4.5C3 4.182 3.059 3.875 3.176 3.58C3.303 3.259 3.488 2.976 3.732 2.732C3.976 2.488 4.259 2.303 4.58 2.176C4.875 2.059 5.182 2 5.5 2C5.818 2 6.125 2.059 6.42 2.176C6.741 2.303 7.024 2.488 7.268 2.732C7.512 2.976 7.697 3.259 7.824 3.58C7.941 3.875 8 4.182 8 4.5L8 5.5C8 5.641 7.952 5.759 7.856 5.856C7.759 5.952 7.641 6 7.5 6C7.359 6 7.241 5.952 7.144 5.856C7.048 5.759 7 5.641 7 5.5L7 4.5C7 4.309 6.965 4.125 6.895 3.948C6.818 3.755 6.707 3.586 6.561 3.439C6.414 3.293 6.245 3.182 6.052 3.105C5.875 3.035 5.691 3 5.5 3C5.309 3 5.125 3.035 4.948 3.105C4.755 3.182 4.586 3.293 4.439 3.439C4.293 3.586 4.182 3.755 4.105 3.948C4.035 4.125 4 4.309 4 4.5L4 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z'/%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='M5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L2 7L2 11L5.5 11C5.641 11 5.759 11.048 5.856 11.144C5.952 11.241 6 11.359 6 11.5C6 11.641 5.952 11.759 5.856 11.856C5.759 11.952 5.641 12 5.5 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6L3 4.5C3 4.182 3.059 3.875 3.176 3.58C3.303 3.259 3.488 2.976 3.732 2.732C3.976 2.488 4.259 2.303 4.58 2.176C4.875 2.059 5.182 2 5.5 2C5.818 2 6.125 2.059 6.42 2.176C6.741 2.303 7.024 2.488 7.268 2.732C7.512 2.976 7.697 3.259 7.824 3.58C7.941 3.875 8 4.182 8 4.5L8 5.5C8 5.641 7.952 5.759 7.856 5.856C7.759 5.952 7.641 6 7.5 6C7.359 6 7.241 5.952 7.144 5.856C7.048 5.759 7 5.641 7 5.5L7 4.5C7 4.309 6.965 4.125 6.895 3.948C6.818 3.755 6.707 3.586 6.561 3.439C6.414 3.293 6.245 3.182 6.052 3.105C5.875 3.035 5.691 3 5.5 3C5.309 3 5.125 3.035 4.948 3.105C4.755 3.182 4.586 3.293 4.439 3.439C4.293 3.586 4.182 3.755 4.105 3.948C4.035 4.125 4 4.309 4 4.5L4 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z'/%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='M5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L2 7L2 11L5.5 11C5.641 11 5.759 11.048 5.856 11.144C5.952 11.241 6 11.359 6 11.5C6 11.641 5.952 11.759 5.856 11.856C5.759 11.952 5.641 12 5.5 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6L3 4.5C3 4.182 3.059 3.875 3.176 3.58C3.303 3.259 3.488 2.976 3.732 2.732C3.976 2.488 4.259 2.303 4.58 2.176C4.875 2.059 5.182 2 5.5 2C5.818 2 6.125 2.059 6.42 2.176C6.741 2.303 7.024 2.488 7.268 2.732C7.512 2.976 7.697 3.259 7.824 3.58C7.941 3.875 8 4.182 8 4.5L8 5.5C8 5.641 7.952 5.759 7.856 5.856C7.759 5.952 7.641 6 7.5 6C7.359 6 7.241 5.952 7.144 5.856C7.048 5.759 7 5.641 7 5.5L7 4.5C7 4.309 6.965 4.125 6.895 3.948C6.818 3.755 6.707 3.586 6.561 3.439C6.414 3.293 6.245 3.182 6.052 3.105C5.875 3.035 5.691 3 5.5 3C5.309 3 5.125 3.035 4.948 3.105C4.755 3.182 4.586 3.293 4.439 3.439C4.293 3.586 4.182 3.755 4.105 3.948C4.035 4.125 4 4.309 4 4.5L4 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "lock-tag" (line-round), MIT. https://gentleface.com/icons/lock-tag import SwiftUI struct LockTagIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 5.856, y: 6.144)) p.addCurve(to: CGPoint(x: 6, y: 6.5), control1: CGPoint(x: 5.952, y: 6.241), control2: CGPoint(x: 6, y: 6.359)) p.addCurve(to: CGPoint(x: 5.856, y: 6.856), control1: CGPoint(x: 6, y: 6.641), control2: CGPoint(x: 5.952, y: 6.759)) p.addCurve(to: CGPoint(x: 5.5, y: 7), control1: CGPoint(x: 5.759, y: 6.952), control2: CGPoint(x: 5.641, y: 7)) p.addLine(to: CGPoint(x: 2, y: 7)) p.addLine(to: CGPoint(x: 2, y: 11)) p.addLine(to: CGPoint(x: 5.5, y: 11)) p.addCurve(to: CGPoint(x: 5.856, y: 11.144), control1: CGPoint(x: 5.641, y: 11), control2: CGPoint(x: 5.759, y: 11.048)) p.addCurve(to: CGPoint(x: 6, y: 11.5), control1: CGPoint(x: 5.952, y: 11.241), control2: CGPoint(x: 6, y: 11.359)) p.addCurve(to: CGPoint(x: 5.856, y: 11.856), control1: CGPoint(x: 6, y: 11.641), control2: CGPoint(x: 5.952, y: 11.759)) p.addCurve(to: CGPoint(x: 5.5, y: 12), control1: CGPoint(x: 5.759, y: 11.952), control2: CGPoint(x: 5.641, y: 12)) p.addLine(to: CGPoint(x: 2, y: 12)) p.addCurve(to: CGPoint(x: 1.293, y: 11.707), control1: CGPoint(x: 1.724, y: 12), control2: CGPoint(x: 1.488, y: 11.902)) p.addCurve(to: CGPoint(x: 1, y: 11), control1: CGPoint(x: 1.098, y: 11.512), control2: CGPoint(x: 1, y: 11.276)) p.addLine(to: CGPoint(x: 1, y: 7)) p.addCurve(to: CGPoint(x: 1.293, y: 6.293), control1: CGPoint(x: 1, y: 6.724), control2: CGPoint(x: 1.098, y: 6.488)) p.addCurve(to: CGPoint(x: 2, y: 6), control1: CGPoint(x: 1.488, y: 6.098), control2: CGPoint(x: 1.724, y: 6)) p.addLine(to: CGPoint(x: 3, y: 6)) p.addLine(to: CGPoint(x: 3, y: 4.5)) p.addCurve(to: CGPoint(x: 3.176, y: 3.58), control1: CGPoint(x: 3, y: 4.182), control2: CGPoint(x: 3.059, y: 3.875)) p.addCurve(to: CGPoint(x: 3.732, y: 2.732), control1: CGPoint(x: 3.303, y: 3.259), control2: CGPoint(x: 3.488, y: 2.976)) p.addCurve(to: CGPoint(x: 4.58, y: 2.176), control1: CGPoint(x: 3.976, y: 2.488), control2: CGPoint(x: 4.259, y: 2.303)) p.addCurve(to: CGPoint(x: 5.5, y: 2), control1: CGPoint(x: 4.875, y: 2.059), control2: CGPoint(x: 5.182, y: 2)) p.addCurve(to: CGPoint(x: 6.42, y: 2.176), control1: CGPoint(x: 5.818, y: 2), control2: CGPoint(x: 6.125, y: 2.059)) p.addCurve(to: CGPoint(x: 7.268, y: 2.732), control1: CGPoint(x: 6.741, y: 2.303), control2: CGPoint(x: 7.024, y: 2.488)) p.addCurve(to: CGPoint(x: 7.824, y: 3.58), control1: CGPoint(x: 7.512, y: 2.976), control2: CGPoint(x: 7.697, y: 3.259)) p.addCurve(to: CGPoint(x: 8, y: 4.5), control1: CGPoint(x: 7.941, y: 3.875), control2: CGPoint(x: 8, y: 4.182)) p.addLine(to: CGPoint(x: 8, y: 5.5)) p.addCurve(to: CGPoint(x: 7.856, y: 5.856), control1: CGPoint(x: 8, y: 5.641), control2: CGPoint(x: 7.952, y: 5.759)) p.addCurve(to: CGPoint(x: 7.5, y: 6), control1: CGPoint(x: 7.759, y: 5.952), control2: CGPoint(x: 7.641, y: 6)) p.addCurve(to: CGPoint(x: 7.144, y: 5.856), control1: CGPoint(x: 7.359, y: 6), control2: CGPoint(x: 7.241, y: 5.952)) p.addCurve(to: CGPoint(x: 7, y: 5.5), control1: CGPoint(x: 7.048, y: 5.759), control2: CGPoint(x: 7, y: 5.641)) p.addLine(to: CGPoint(x: 7, y: 4.5)) p.addCurve(to: CGPoint(x: 6.895, y: 3.948), control1: CGPoint(x: 7, y: 4.309), control2: CGPoint(x: 6.965, y: 4.125)) p.addCurve(to: CGPoint(x: 6.561, y: 3.439), control1: CGPoint(x: 6.818, y: 3.755), control2: CGPoint(x: 6.707, y: 3.586)) p.addCurve(to: CGPoint(x: 6.052, y: 3.105), control1: CGPoint(x: 6.414, y: 3.293), control2: CGPoint(x: 6.245, y: 3.182)) p.addCurve(to: CGPoint(x: 5.5, y: 3), control1: CGPoint(x: 5.875, y: 3.035), control2: CGPoint(x: 5.691, y: 3)) p.addCurve(to: CGPoint(x: 4.948, y: 3.105), control1: CGPoint(x: 5.309, y: 3), control2: CGPoint(x: 5.125, y: 3.035)) p.addCurve(to: CGPoint(x: 4.439, y: 3.439), control1: CGPoint(x: 4.755, y: 3.182), control2: CGPoint(x: 4.586, y: 3.293)) p.addCurve(to: CGPoint(x: 4.105, y: 3.948), control1: CGPoint(x: 4.293, y: 3.586), control2: CGPoint(x: 4.182, y: 3.755)) p.addCurve(to: CGPoint(x: 4, y: 4.5), control1: CGPoint(x: 4.035, y: 4.125), control2: CGPoint(x: 4, y: 4.309)) p.addLine(to: CGPoint(x: 4, y: 6)) p.addLine(to: CGPoint(x: 5.5, y: 6)) p.addCurve(to: CGPoint(x: 5.856, y: 6.144), control1: CGPoint(x: 5.641, y: 6), control2: CGPoint(x: 5.759, y: 6.048)) p.closeSubpath() p.move(to: CGPoint(x: 15.586, y: 11.5)) p.addCurve(to: CGPoint(x: 15.293, y: 12.207), control1: CGPoint(x: 15.586, y: 11.776), control2: CGPoint(x: 15.488, y: 12.012)) p.addLine(to: CGPoint(x: 12.207, y: 15.293)) p.addCurve(to: CGPoint(x: 11.5, y: 15.586), control1: CGPoint(x: 12.012, y: 15.488), control2: CGPoint(x: 11.776, y: 15.586)) p.addCurve(to: CGPoint(x: 10.793, y: 15.293), control1: CGPoint(x: 11.224, y: 15.586), control2: CGPoint(x: 10.988, y: 15.488)) p.addLine(to: CGPoint(x: 7.293, y: 11.793)) p.addCurve(to: CGPoint(x: 7, y: 11.086), control1: CGPoint(x: 7.098, y: 11.598), control2: CGPoint(x: 7, y: 11.362)) p.addLine(to: CGPoint(x: 7, y: 8)) p.addCurve(to: CGPoint(x: 7.293, y: 7.293), control1: CGPoint(x: 7, y: 7.724), control2: CGPoint(x: 7.098, y: 7.488)) p.addCurve(to: CGPoint(x: 8, y: 7), control1: CGPoint(x: 7.488, y: 7.098), control2: CGPoint(x: 7.724, y: 7)) p.addLine(to: CGPoint(x: 11.086, y: 7)) p.addCurve(to: CGPoint(x: 11.793, y: 7.293), control1: CGPoint(x: 11.362, y: 7), control2: CGPoint(x: 11.598, y: 7.098)) p.addLine(to: CGPoint(x: 15.293, y: 10.793)) p.addCurve(to: CGPoint(x: 15.586, y: 11.5), control1: CGPoint(x: 15.488, y: 10.988), control2: CGPoint(x: 15.586, y: 11.224)) p.closeSubpath() p.move(to: CGPoint(x: 10, y: 11)) p.addCurve(to: CGPoint(x: 11, y: 10), control1: CGPoint(x: 10.552, y: 11), control2: CGPoint(x: 11, y: 10.552)) p.addCurve(to: CGPoint(x: 10, y: 9), control1: CGPoint(x: 11, y: 9.448), control2: CGPoint(x: 10.552, y: 9)) p.addCurve(to: CGPoint(x: 9, y: 10), control1: CGPoint(x: 9.448, y: 9), control2: CGPoint(x: 9, y: 9.448)) p.addCurve(to: CGPoint(x: 10, y: 11), control1: CGPoint(x: 9, y: 10.552), control2: CGPoint(x: 9.448, y: 11)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // LockTagIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "lock-tag" (line-round), MIT. https://gentleface.com/icons/lock-tag 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 LockTagIcon: ImageVector by lazy { ImageVector.Builder( name = "lock-tag", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L2 7L2 11L5.5 11C5.641 11 5.759 11.048 5.856 11.144C5.952 11.241 6 11.359 6 11.5C6 11.641 5.952 11.759 5.856 11.856C5.759 11.952 5.641 12 5.5 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3 6L3 4.5C3 4.182 3.059 3.875 3.176 3.58C3.303 3.259 3.488 2.976 3.732 2.732C3.976 2.488 4.259 2.303 4.58 2.176C4.875 2.059 5.182 2 5.5 2C5.818 2 6.125 2.059 6.42 2.176C6.741 2.303 7.024 2.488 7.268 2.732C7.512 2.976 7.697 3.259 7.824 3.58C7.941 3.875 8 4.182 8 4.5L8 5.5C8 5.641 7.952 5.759 7.856 5.856C7.759 5.952 7.641 6 7.5 6C7.359 6 7.241 5.952 7.144 5.856C7.048 5.759 7 5.641 7 5.5L7 4.5C7 4.309 6.965 4.125 6.895 3.948C6.818 3.755 6.707 3.586 6.561 3.439C6.414 3.293 6.245 3.182 6.052 3.105C5.875 3.035 5.691 3 5.5 3C5.309 3 5.125 3.035 4.948 3.105C4.755 3.182 4.586 3.293 4.439 3.439C4.293 3.586 4.182 3.755 4.105 3.948C4.035 4.125 4 4.309 4 4.5L4 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z"), fill = SolidColor(Color.Black), ).build() } // Icon(LockTagIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "lock-tag" (line-round), MIT. https://gentleface.com/icons/lock-tag import 'package:flutter/widgets.dart'; class LockTagIcon extends StatelessWidget { const LockTagIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _LockTagIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _LockTagIconPainter extends CustomPainter { _LockTagIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(5.856, 6.144) ..cubicTo(5.952, 6.241, 6, 6.359, 6, 6.5) ..cubicTo(6, 6.641, 5.952, 6.759, 5.856, 6.856) ..cubicTo(5.759, 6.952, 5.641, 7, 5.5, 7) ..lineTo(2, 7) ..lineTo(2, 11) ..lineTo(5.5, 11) ..cubicTo(5.641, 11, 5.759, 11.048, 5.856, 11.144) ..cubicTo(5.952, 11.241, 6, 11.359, 6, 11.5) ..cubicTo(6, 11.641, 5.952, 11.759, 5.856, 11.856) ..cubicTo(5.759, 11.952, 5.641, 12, 5.5, 12) ..lineTo(2, 12) ..cubicTo(1.724, 12, 1.488, 11.902, 1.293, 11.707) ..cubicTo(1.098, 11.512, 1, 11.276, 1, 11) ..lineTo(1, 7) ..cubicTo(1, 6.724, 1.098, 6.488, 1.293, 6.293) ..cubicTo(1.488, 6.098, 1.724, 6, 2, 6) ..lineTo(3, 6) ..lineTo(3, 4.5) ..cubicTo(3, 4.182, 3.059, 3.875, 3.176, 3.58) ..cubicTo(3.303, 3.259, 3.488, 2.976, 3.732, 2.732) ..cubicTo(3.976, 2.488, 4.259, 2.303, 4.58, 2.176) ..cubicTo(4.875, 2.059, 5.182, 2, 5.5, 2) ..cubicTo(5.818, 2, 6.125, 2.059, 6.42, 2.176) ..cubicTo(6.741, 2.303, 7.024, 2.488, 7.268, 2.732) ..cubicTo(7.512, 2.976, 7.697, 3.259, 7.824, 3.58) ..cubicTo(7.941, 3.875, 8, 4.182, 8, 4.5) ..lineTo(8, 5.5) ..cubicTo(8, 5.641, 7.952, 5.759, 7.856, 5.856) ..cubicTo(7.759, 5.952, 7.641, 6, 7.5, 6) ..cubicTo(7.359, 6, 7.241, 5.952, 7.144, 5.856) ..cubicTo(7.048, 5.759, 7, 5.641, 7, 5.5) ..lineTo(7, 4.5) ..cubicTo(7, 4.309, 6.965, 4.125, 6.895, 3.948) ..cubicTo(6.818, 3.755, 6.707, 3.586, 6.561, 3.439) ..cubicTo(6.414, 3.293, 6.245, 3.182, 6.052, 3.105) ..cubicTo(5.875, 3.035, 5.691, 3, 5.5, 3) ..cubicTo(5.309, 3, 5.125, 3.035, 4.948, 3.105) ..cubicTo(4.755, 3.182, 4.586, 3.293, 4.439, 3.439) ..cubicTo(4.293, 3.586, 4.182, 3.755, 4.105, 3.948) ..cubicTo(4.035, 4.125, 4, 4.309, 4, 4.5) ..lineTo(4, 6) ..lineTo(5.5, 6) ..cubicTo(5.641, 6, 5.759, 6.048, 5.856, 6.144) ..close() ..moveTo(15.586, 11.5) ..cubicTo(15.586, 11.776, 15.488, 12.012, 15.293, 12.207) ..lineTo(12.207, 15.293) ..cubicTo(12.012, 15.488, 11.776, 15.586, 11.5, 15.586) ..cubicTo(11.224, 15.586, 10.988, 15.488, 10.793, 15.293) ..lineTo(7.293, 11.793) ..cubicTo(7.098, 11.598, 7, 11.362, 7, 11.086) ..lineTo(7, 8) ..cubicTo(7, 7.724, 7.098, 7.488, 7.293, 7.293) ..cubicTo(7.488, 7.098, 7.724, 7, 8, 7) ..lineTo(11.086, 7) ..cubicTo(11.362, 7, 11.598, 7.098, 11.793, 7.293) ..lineTo(15.293, 10.793) ..cubicTo(15.488, 10.988, 15.586, 11.224, 15.586, 11.5) ..close() ..moveTo(10, 11) ..cubicTo(10.552, 11, 11, 10.552, 11, 10) ..cubicTo(11, 9.448, 10.552, 9, 10, 9) ..cubicTo(9.448, 9, 9, 9.448, 9, 10) ..cubicTo(9, 10.552, 9.448, 11, 10, 11) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_LockTagIconPainter old) => old.color != color; } ```