# hair icon Hair. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/hair - Category: People & accounts - Use it for: hair - Tags: hair, hairstyle, haircut, salon, barber, head, beauty - Component name: HairIcon - Added: 2026-11-12 ## 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/hair.svg · PNG https://gentleface.com/png/line-round/16/hair.png · https://gentleface.com/png/line-round/32/hair.png · https://gentleface.com/png/line-round/48/hair.png - line-soft: https://gentleface.com/svg/line-soft/16/hair.svg · PNG https://gentleface.com/png/line-soft/16/hair.png · https://gentleface.com/png/line-soft/32/hair.png · https://gentleface.com/png/line-soft/48/hair.png - line-sharp: https://gentleface.com/svg/line-sharp/16/hair.svg · PNG https://gentleface.com/png/line-sharp/16/hair.png · https://gentleface.com/png/line-sharp/32/hair.png · https://gentleface.com/png/line-sharp/48/hair.png - solid-round: https://gentleface.com/svg/solid-round/16/hair.svg · PNG https://gentleface.com/png/solid-round/16/hair.png · https://gentleface.com/png/solid-round/32/hair.png · https://gentleface.com/png/solid-round/48/hair.png - solid-soft: https://gentleface.com/svg/solid-soft/16/hair.svg · PNG https://gentleface.com/png/solid-soft/16/hair.png · https://gentleface.com/png/solid-soft/32/hair.png · https://gentleface.com/png/solid-soft/48/hair.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/hair.svg · PNG https://gentleface.com/png/solid-sharp/16/hair.png · https://gentleface.com/png/solid-sharp/32/hair.png · https://gentleface.com/png/solid-sharp/48/hair.png The SVG of every style: https://gentleface.com/icons/hair.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 "hair" (line-round), MIT. https://gentleface.com/icons/hair import type { SVGProps } from 'react'; export function HairIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "hair" (line-round), MIT. https://gentleface.com/icons/hair. Takes the text color. */ .icon-hair { 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='M2.421 5.291C2.726 4.521 3.172 3.843 3.757 3.257C4.343 2.672 5.021 2.226 5.791 1.921C6.501 1.64 7.237 1.5 8 1.5C8.763 1.5 9.499 1.64 10.209 1.921C10.979 2.226 11.657 2.672 12.243 3.257C12.828 3.843 13.274 4.521 13.579 5.291C13.86 6.001 14 6.737 14 7.5L14 13.5C14 13.691 13.965 13.875 13.895 14.052C13.818 14.245 13.707 14.414 13.561 14.561C13.414 14.707 13.245 14.818 13.052 14.895C12.875 14.965 12.691 15 12.5 15C12.309 15 12.125 14.965 11.948 14.895C11.755 14.818 11.586 14.707 11.439 14.561C11.293 14.414 11.182 14.245 11.105 14.052C11.035 13.875 11 13.691 11 13.5L11 9C11 8.412 10.806 7.868 10.418 7.369C10.132 7.001 9.699 6.609 9.12 6.191C8.128 7.478 6.755 8.376 5 8.883L5 13.5C5 13.691 4.965 13.875 4.895 14.052C4.818 14.245 4.707 14.414 4.561 14.561C4.414 14.707 4.245 14.818 4.052 14.895C3.875 14.965 3.691 15 3.5 15C3.309 15 3.125 14.965 2.948 14.895C2.755 14.818 2.586 14.707 2.439 14.561C2.293 14.414 2.182 14.245 2.105 14.052C2.035 13.875 2 13.691 2 13.5L2 7.5C2 6.737 2.14 6.001 2.421 5.291ZM4.105 8.191C4.175 8.102 4.266 8.043 4.379 8.015C6.254 7.546 7.655 6.615 8.584 5.223C8.662 5.105 8.768 5.033 8.901 5.007C9.035 4.98 9.16 5.006 9.277 5.084C10.149 5.665 10.793 6.222 11.207 6.756C11.736 7.435 12 8.183 12 9L12 13.5C12 13.638 12.049 13.756 12.146 13.854C12.244 13.951 12.362 14 12.5 14C12.638 14 12.756 13.951 12.854 13.854C12.951 13.756 13 13.638 13 13.5L13 7.5C13 6.864 12.883 6.251 12.649 5.66C12.395 5.018 12.024 4.453 11.536 3.964C11.047 3.476 10.482 3.105 9.84 2.851C9.249 2.617 8.636 2.5 8 2.5C7.364 2.5 6.751 2.617 6.16 2.851C5.518 3.105 4.953 3.476 4.464 3.964C3.976 4.453 3.605 5.018 3.351 5.66C3.117 6.251 3 6.864 3 7.5L3 13.5C3 13.638 3.049 13.756 3.146 13.854C3.244 13.951 3.362 14 3.5 14C3.638 14 3.756 13.951 3.854 13.854C3.951 13.756 4 13.638 4 13.5L4 8.5C4 8.384 4.035 8.281 4.105 8.191Z'/%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='M2.421 5.291C2.726 4.521 3.172 3.843 3.757 3.257C4.343 2.672 5.021 2.226 5.791 1.921C6.501 1.64 7.237 1.5 8 1.5C8.763 1.5 9.499 1.64 10.209 1.921C10.979 2.226 11.657 2.672 12.243 3.257C12.828 3.843 13.274 4.521 13.579 5.291C13.86 6.001 14 6.737 14 7.5L14 13.5C14 13.691 13.965 13.875 13.895 14.052C13.818 14.245 13.707 14.414 13.561 14.561C13.414 14.707 13.245 14.818 13.052 14.895C12.875 14.965 12.691 15 12.5 15C12.309 15 12.125 14.965 11.948 14.895C11.755 14.818 11.586 14.707 11.439 14.561C11.293 14.414 11.182 14.245 11.105 14.052C11.035 13.875 11 13.691 11 13.5L11 9C11 8.412 10.806 7.868 10.418 7.369C10.132 7.001 9.699 6.609 9.12 6.191C8.128 7.478 6.755 8.376 5 8.883L5 13.5C5 13.691 4.965 13.875 4.895 14.052C4.818 14.245 4.707 14.414 4.561 14.561C4.414 14.707 4.245 14.818 4.052 14.895C3.875 14.965 3.691 15 3.5 15C3.309 15 3.125 14.965 2.948 14.895C2.755 14.818 2.586 14.707 2.439 14.561C2.293 14.414 2.182 14.245 2.105 14.052C2.035 13.875 2 13.691 2 13.5L2 7.5C2 6.737 2.14 6.001 2.421 5.291ZM4.105 8.191C4.175 8.102 4.266 8.043 4.379 8.015C6.254 7.546 7.655 6.615 8.584 5.223C8.662 5.105 8.768 5.033 8.901 5.007C9.035 4.98 9.16 5.006 9.277 5.084C10.149 5.665 10.793 6.222 11.207 6.756C11.736 7.435 12 8.183 12 9L12 13.5C12 13.638 12.049 13.756 12.146 13.854C12.244 13.951 12.362 14 12.5 14C12.638 14 12.756 13.951 12.854 13.854C12.951 13.756 13 13.638 13 13.5L13 7.5C13 6.864 12.883 6.251 12.649 5.66C12.395 5.018 12.024 4.453 11.536 3.964C11.047 3.476 10.482 3.105 9.84 2.851C9.249 2.617 8.636 2.5 8 2.5C7.364 2.5 6.751 2.617 6.16 2.851C5.518 3.105 4.953 3.476 4.464 3.964C3.976 4.453 3.605 5.018 3.351 5.66C3.117 6.251 3 6.864 3 7.5L3 13.5C3 13.638 3.049 13.756 3.146 13.854C3.244 13.951 3.362 14 3.5 14C3.638 14 3.756 13.951 3.854 13.854C3.951 13.756 4 13.638 4 13.5L4 8.5C4 8.384 4.035 8.281 4.105 8.191Z'/%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='M2.421 5.291C2.726 4.521 3.172 3.843 3.757 3.257C4.343 2.672 5.021 2.226 5.791 1.921C6.501 1.64 7.237 1.5 8 1.5C8.763 1.5 9.499 1.64 10.209 1.921C10.979 2.226 11.657 2.672 12.243 3.257C12.828 3.843 13.274 4.521 13.579 5.291C13.86 6.001 14 6.737 14 7.5L14 13.5C14 13.691 13.965 13.875 13.895 14.052C13.818 14.245 13.707 14.414 13.561 14.561C13.414 14.707 13.245 14.818 13.052 14.895C12.875 14.965 12.691 15 12.5 15C12.309 15 12.125 14.965 11.948 14.895C11.755 14.818 11.586 14.707 11.439 14.561C11.293 14.414 11.182 14.245 11.105 14.052C11.035 13.875 11 13.691 11 13.5L11 9C11 8.412 10.806 7.868 10.418 7.369C10.132 7.001 9.699 6.609 9.12 6.191C8.128 7.478 6.755 8.376 5 8.883L5 13.5C5 13.691 4.965 13.875 4.895 14.052C4.818 14.245 4.707 14.414 4.561 14.561C4.414 14.707 4.245 14.818 4.052 14.895C3.875 14.965 3.691 15 3.5 15C3.309 15 3.125 14.965 2.948 14.895C2.755 14.818 2.586 14.707 2.439 14.561C2.293 14.414 2.182 14.245 2.105 14.052C2.035 13.875 2 13.691 2 13.5L2 7.5C2 6.737 2.14 6.001 2.421 5.291ZM4.105 8.191C4.175 8.102 4.266 8.043 4.379 8.015C6.254 7.546 7.655 6.615 8.584 5.223C8.662 5.105 8.768 5.033 8.901 5.007C9.035 4.98 9.16 5.006 9.277 5.084C10.149 5.665 10.793 6.222 11.207 6.756C11.736 7.435 12 8.183 12 9L12 13.5C12 13.638 12.049 13.756 12.146 13.854C12.244 13.951 12.362 14 12.5 14C12.638 14 12.756 13.951 12.854 13.854C12.951 13.756 13 13.638 13 13.5L13 7.5C13 6.864 12.883 6.251 12.649 5.66C12.395 5.018 12.024 4.453 11.536 3.964C11.047 3.476 10.482 3.105 9.84 2.851C9.249 2.617 8.636 2.5 8 2.5C7.364 2.5 6.751 2.617 6.16 2.851C5.518 3.105 4.953 3.476 4.464 3.964C3.976 4.453 3.605 5.018 3.351 5.66C3.117 6.251 3 6.864 3 7.5L3 13.5C3 13.638 3.049 13.756 3.146 13.854C3.244 13.951 3.362 14 3.5 14C3.638 14 3.756 13.951 3.854 13.854C3.951 13.756 4 13.638 4 13.5L4 8.5C4 8.384 4.035 8.281 4.105 8.191Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "hair" (line-round), MIT. https://gentleface.com/icons/hair import SwiftUI struct HairIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.421, y: 5.291)) p.addCurve(to: CGPoint(x: 3.757, y: 3.257), control1: CGPoint(x: 2.726, y: 4.521), control2: CGPoint(x: 3.172, y: 3.843)) p.addCurve(to: CGPoint(x: 5.791, y: 1.921), control1: CGPoint(x: 4.343, y: 2.672), control2: CGPoint(x: 5.021, y: 2.226)) p.addCurve(to: CGPoint(x: 8, y: 1.5), control1: CGPoint(x: 6.501, y: 1.64), control2: CGPoint(x: 7.237, y: 1.5)) p.addCurve(to: CGPoint(x: 10.209, y: 1.921), control1: CGPoint(x: 8.763, y: 1.5), control2: CGPoint(x: 9.499, y: 1.64)) p.addCurve(to: CGPoint(x: 12.243, y: 3.257), control1: CGPoint(x: 10.979, y: 2.226), control2: CGPoint(x: 11.657, y: 2.672)) p.addCurve(to: CGPoint(x: 13.579, y: 5.291), control1: CGPoint(x: 12.828, y: 3.843), control2: CGPoint(x: 13.274, y: 4.521)) p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.86, y: 6.001), control2: CGPoint(x: 14, y: 6.737)) p.addLine(to: CGPoint(x: 14, y: 13.5)) p.addCurve(to: CGPoint(x: 13.895, y: 14.052), control1: CGPoint(x: 14, y: 13.691), control2: CGPoint(x: 13.965, y: 13.875)) p.addCurve(to: CGPoint(x: 13.561, y: 14.561), control1: CGPoint(x: 13.818, y: 14.245), control2: CGPoint(x: 13.707, y: 14.414)) p.addCurve(to: CGPoint(x: 13.052, y: 14.895), control1: CGPoint(x: 13.414, y: 14.707), control2: CGPoint(x: 13.245, y: 14.818)) p.addCurve(to: CGPoint(x: 12.5, y: 15), control1: CGPoint(x: 12.875, y: 14.965), control2: CGPoint(x: 12.691, y: 15)) p.addCurve(to: CGPoint(x: 11.948, y: 14.895), control1: CGPoint(x: 12.309, y: 15), control2: CGPoint(x: 12.125, y: 14.965)) p.addCurve(to: CGPoint(x: 11.439, y: 14.561), control1: CGPoint(x: 11.755, y: 14.818), control2: CGPoint(x: 11.586, y: 14.707)) p.addCurve(to: CGPoint(x: 11.105, y: 14.052), control1: CGPoint(x: 11.293, y: 14.414), control2: CGPoint(x: 11.182, y: 14.245)) p.addCurve(to: CGPoint(x: 11, y: 13.5), control1: CGPoint(x: 11.035, y: 13.875), control2: CGPoint(x: 11, y: 13.691)) p.addLine(to: CGPoint(x: 11, y: 9)) p.addCurve(to: CGPoint(x: 10.418, y: 7.369), control1: CGPoint(x: 11, y: 8.412), control2: CGPoint(x: 10.806, y: 7.868)) p.addCurve(to: CGPoint(x: 9.12, y: 6.191), control1: CGPoint(x: 10.132, y: 7.001), control2: CGPoint(x: 9.699, y: 6.609)) p.addCurve(to: CGPoint(x: 5, y: 8.883), control1: CGPoint(x: 8.128, y: 7.478), control2: CGPoint(x: 6.755, y: 8.376)) p.addLine(to: CGPoint(x: 5, y: 13.5)) p.addCurve(to: CGPoint(x: 4.895, y: 14.052), control1: CGPoint(x: 5, y: 13.691), control2: CGPoint(x: 4.965, y: 13.875)) p.addCurve(to: CGPoint(x: 4.561, y: 14.561), control1: CGPoint(x: 4.818, y: 14.245), control2: CGPoint(x: 4.707, y: 14.414)) p.addCurve(to: CGPoint(x: 4.052, y: 14.895), control1: CGPoint(x: 4.414, y: 14.707), control2: CGPoint(x: 4.245, y: 14.818)) p.addCurve(to: CGPoint(x: 3.5, y: 15), control1: CGPoint(x: 3.875, y: 14.965), control2: CGPoint(x: 3.691, y: 15)) p.addCurve(to: CGPoint(x: 2.948, y: 14.895), control1: CGPoint(x: 3.309, y: 15), control2: CGPoint(x: 3.125, y: 14.965)) p.addCurve(to: CGPoint(x: 2.439, y: 14.561), control1: CGPoint(x: 2.755, y: 14.818), control2: CGPoint(x: 2.586, y: 14.707)) p.addCurve(to: CGPoint(x: 2.105, y: 14.052), control1: CGPoint(x: 2.293, y: 14.414), control2: CGPoint(x: 2.182, y: 14.245)) p.addCurve(to: CGPoint(x: 2, y: 13.5), control1: CGPoint(x: 2.035, y: 13.875), control2: CGPoint(x: 2, y: 13.691)) p.addLine(to: CGPoint(x: 2, y: 7.5)) p.addCurve(to: CGPoint(x: 2.421, y: 5.291), control1: CGPoint(x: 2, y: 6.737), control2: CGPoint(x: 2.14, y: 6.001)) p.closeSubpath() p.move(to: CGPoint(x: 4.105, y: 8.191)) p.addCurve(to: CGPoint(x: 4.379, y: 8.015), control1: CGPoint(x: 4.175, y: 8.102), control2: CGPoint(x: 4.266, y: 8.043)) p.addCurve(to: CGPoint(x: 8.584, y: 5.223), control1: CGPoint(x: 6.254, y: 7.546), control2: CGPoint(x: 7.655, y: 6.615)) p.addCurve(to: CGPoint(x: 8.901, y: 5.007), control1: CGPoint(x: 8.662, y: 5.105), control2: CGPoint(x: 8.768, y: 5.033)) p.addCurve(to: CGPoint(x: 9.277, y: 5.084), control1: CGPoint(x: 9.035, y: 4.98), control2: CGPoint(x: 9.16, y: 5.006)) p.addCurve(to: CGPoint(x: 11.207, y: 6.756), control1: CGPoint(x: 10.149, y: 5.665), control2: CGPoint(x: 10.793, y: 6.222)) p.addCurve(to: CGPoint(x: 12, y: 9), control1: CGPoint(x: 11.736, y: 7.435), control2: CGPoint(x: 12, y: 8.183)) p.addLine(to: CGPoint(x: 12, y: 13.5)) p.addCurve(to: CGPoint(x: 12.146, y: 13.854), control1: CGPoint(x: 12, y: 13.638), control2: CGPoint(x: 12.049, y: 13.756)) p.addCurve(to: CGPoint(x: 12.5, y: 14), control1: CGPoint(x: 12.244, y: 13.951), control2: CGPoint(x: 12.362, y: 14)) p.addCurve(to: CGPoint(x: 12.854, y: 13.854), control1: CGPoint(x: 12.638, y: 14), control2: CGPoint(x: 12.756, y: 13.951)) p.addCurve(to: CGPoint(x: 13, y: 13.5), control1: CGPoint(x: 12.951, y: 13.756), control2: CGPoint(x: 13, y: 13.638)) p.addLine(to: CGPoint(x: 13, y: 7.5)) p.addCurve(to: CGPoint(x: 12.649, y: 5.66), control1: CGPoint(x: 13, y: 6.864), control2: CGPoint(x: 12.883, y: 6.251)) p.addCurve(to: CGPoint(x: 11.536, y: 3.964), control1: CGPoint(x: 12.395, y: 5.018), control2: CGPoint(x: 12.024, y: 4.453)) p.addCurve(to: CGPoint(x: 9.84, y: 2.851), control1: CGPoint(x: 11.047, y: 3.476), control2: CGPoint(x: 10.482, y: 3.105)) p.addCurve(to: CGPoint(x: 8, y: 2.5), control1: CGPoint(x: 9.249, y: 2.617), control2: CGPoint(x: 8.636, y: 2.5)) p.addCurve(to: CGPoint(x: 6.16, y: 2.851), control1: CGPoint(x: 7.364, y: 2.5), control2: CGPoint(x: 6.751, y: 2.617)) p.addCurve(to: CGPoint(x: 4.464, y: 3.964), control1: CGPoint(x: 5.518, y: 3.105), control2: CGPoint(x: 4.953, y: 3.476)) p.addCurve(to: CGPoint(x: 3.351, y: 5.66), control1: CGPoint(x: 3.976, y: 4.453), control2: CGPoint(x: 3.605, y: 5.018)) p.addCurve(to: CGPoint(x: 3, y: 7.5), control1: CGPoint(x: 3.117, y: 6.251), control2: CGPoint(x: 3, y: 6.864)) p.addLine(to: CGPoint(x: 3, y: 13.5)) p.addCurve(to: CGPoint(x: 3.146, y: 13.854), control1: CGPoint(x: 3, y: 13.638), control2: CGPoint(x: 3.049, y: 13.756)) p.addCurve(to: CGPoint(x: 3.5, y: 14), control1: CGPoint(x: 3.244, y: 13.951), control2: CGPoint(x: 3.362, y: 14)) p.addCurve(to: CGPoint(x: 3.854, y: 13.854), control1: CGPoint(x: 3.638, y: 14), control2: CGPoint(x: 3.756, y: 13.951)) p.addCurve(to: CGPoint(x: 4, y: 13.5), control1: CGPoint(x: 3.951, y: 13.756), control2: CGPoint(x: 4, y: 13.638)) p.addLine(to: CGPoint(x: 4, y: 8.5)) p.addCurve(to: CGPoint(x: 4.105, y: 8.191), control1: CGPoint(x: 4, y: 8.384), control2: CGPoint(x: 4.035, y: 8.281)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // HairIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "hair" (line-round), MIT. https://gentleface.com/icons/hair 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 HairIcon: ImageVector by lazy { ImageVector.Builder( name = "hair", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.421 5.291C2.726 4.521 3.172 3.843 3.757 3.257C4.343 2.672 5.021 2.226 5.791 1.921C6.501 1.64 7.237 1.5 8 1.5C8.763 1.5 9.499 1.64 10.209 1.921C10.979 2.226 11.657 2.672 12.243 3.257C12.828 3.843 13.274 4.521 13.579 5.291C13.86 6.001 14 6.737 14 7.5L14 13.5C14 13.691 13.965 13.875 13.895 14.052C13.818 14.245 13.707 14.414 13.561 14.561C13.414 14.707 13.245 14.818 13.052 14.895C12.875 14.965 12.691 15 12.5 15C12.309 15 12.125 14.965 11.948 14.895C11.755 14.818 11.586 14.707 11.439 14.561C11.293 14.414 11.182 14.245 11.105 14.052C11.035 13.875 11 13.691 11 13.5L11 9C11 8.412 10.806 7.868 10.418 7.369C10.132 7.001 9.699 6.609 9.12 6.191C8.128 7.478 6.755 8.376 5 8.883L5 13.5C5 13.691 4.965 13.875 4.895 14.052C4.818 14.245 4.707 14.414 4.561 14.561C4.414 14.707 4.245 14.818 4.052 14.895C3.875 14.965 3.691 15 3.5 15C3.309 15 3.125 14.965 2.948 14.895C2.755 14.818 2.586 14.707 2.439 14.561C2.293 14.414 2.182 14.245 2.105 14.052C2.035 13.875 2 13.691 2 13.5L2 7.5C2 6.737 2.14 6.001 2.421 5.291ZM4.105 8.191C4.175 8.102 4.266 8.043 4.379 8.015C6.254 7.546 7.655 6.615 8.584 5.223C8.662 5.105 8.768 5.033 8.901 5.007C9.035 4.98 9.16 5.006 9.277 5.084C10.149 5.665 10.793 6.222 11.207 6.756C11.736 7.435 12 8.183 12 9L12 13.5C12 13.638 12.049 13.756 12.146 13.854C12.244 13.951 12.362 14 12.5 14C12.638 14 12.756 13.951 12.854 13.854C12.951 13.756 13 13.638 13 13.5L13 7.5C13 6.864 12.883 6.251 12.649 5.66C12.395 5.018 12.024 4.453 11.536 3.964C11.047 3.476 10.482 3.105 9.84 2.851C9.249 2.617 8.636 2.5 8 2.5C7.364 2.5 6.751 2.617 6.16 2.851C5.518 3.105 4.953 3.476 4.464 3.964C3.976 4.453 3.605 5.018 3.351 5.66C3.117 6.251 3 6.864 3 7.5L3 13.5C3 13.638 3.049 13.756 3.146 13.854C3.244 13.951 3.362 14 3.5 14C3.638 14 3.756 13.951 3.854 13.854C3.951 13.756 4 13.638 4 13.5L4 8.5C4 8.384 4.035 8.281 4.105 8.191Z"), fill = SolidColor(Color.Black), ).build() } // Icon(HairIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "hair" (line-round), MIT. https://gentleface.com/icons/hair import 'package:flutter/widgets.dart'; class HairIcon extends StatelessWidget { const HairIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _HairIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _HairIconPainter extends CustomPainter { _HairIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(2.421, 5.291) ..cubicTo(2.726, 4.521, 3.172, 3.843, 3.757, 3.257) ..cubicTo(4.343, 2.672, 5.021, 2.226, 5.791, 1.921) ..cubicTo(6.501, 1.64, 7.237, 1.5, 8, 1.5) ..cubicTo(8.763, 1.5, 9.499, 1.64, 10.209, 1.921) ..cubicTo(10.979, 2.226, 11.657, 2.672, 12.243, 3.257) ..cubicTo(12.828, 3.843, 13.274, 4.521, 13.579, 5.291) ..cubicTo(13.86, 6.001, 14, 6.737, 14, 7.5) ..lineTo(14, 13.5) ..cubicTo(14, 13.691, 13.965, 13.875, 13.895, 14.052) ..cubicTo(13.818, 14.245, 13.707, 14.414, 13.561, 14.561) ..cubicTo(13.414, 14.707, 13.245, 14.818, 13.052, 14.895) ..cubicTo(12.875, 14.965, 12.691, 15, 12.5, 15) ..cubicTo(12.309, 15, 12.125, 14.965, 11.948, 14.895) ..cubicTo(11.755, 14.818, 11.586, 14.707, 11.439, 14.561) ..cubicTo(11.293, 14.414, 11.182, 14.245, 11.105, 14.052) ..cubicTo(11.035, 13.875, 11, 13.691, 11, 13.5) ..lineTo(11, 9) ..cubicTo(11, 8.412, 10.806, 7.868, 10.418, 7.369) ..cubicTo(10.132, 7.001, 9.699, 6.609, 9.12, 6.191) ..cubicTo(8.128, 7.478, 6.755, 8.376, 5, 8.883) ..lineTo(5, 13.5) ..cubicTo(5, 13.691, 4.965, 13.875, 4.895, 14.052) ..cubicTo(4.818, 14.245, 4.707, 14.414, 4.561, 14.561) ..cubicTo(4.414, 14.707, 4.245, 14.818, 4.052, 14.895) ..cubicTo(3.875, 14.965, 3.691, 15, 3.5, 15) ..cubicTo(3.309, 15, 3.125, 14.965, 2.948, 14.895) ..cubicTo(2.755, 14.818, 2.586, 14.707, 2.439, 14.561) ..cubicTo(2.293, 14.414, 2.182, 14.245, 2.105, 14.052) ..cubicTo(2.035, 13.875, 2, 13.691, 2, 13.5) ..lineTo(2, 7.5) ..cubicTo(2, 6.737, 2.14, 6.001, 2.421, 5.291) ..close() ..moveTo(4.105, 8.191) ..cubicTo(4.175, 8.102, 4.266, 8.043, 4.379, 8.015) ..cubicTo(6.254, 7.546, 7.655, 6.615, 8.584, 5.223) ..cubicTo(8.662, 5.105, 8.768, 5.033, 8.901, 5.007) ..cubicTo(9.035, 4.98, 9.16, 5.006, 9.277, 5.084) ..cubicTo(10.149, 5.665, 10.793, 6.222, 11.207, 6.756) ..cubicTo(11.736, 7.435, 12, 8.183, 12, 9) ..lineTo(12, 13.5) ..cubicTo(12, 13.638, 12.049, 13.756, 12.146, 13.854) ..cubicTo(12.244, 13.951, 12.362, 14, 12.5, 14) ..cubicTo(12.638, 14, 12.756, 13.951, 12.854, 13.854) ..cubicTo(12.951, 13.756, 13, 13.638, 13, 13.5) ..lineTo(13, 7.5) ..cubicTo(13, 6.864, 12.883, 6.251, 12.649, 5.66) ..cubicTo(12.395, 5.018, 12.024, 4.453, 11.536, 3.964) ..cubicTo(11.047, 3.476, 10.482, 3.105, 9.84, 2.851) ..cubicTo(9.249, 2.617, 8.636, 2.5, 8, 2.5) ..cubicTo(7.364, 2.5, 6.751, 2.617, 6.16, 2.851) ..cubicTo(5.518, 3.105, 4.953, 3.476, 4.464, 3.964) ..cubicTo(3.976, 4.453, 3.605, 5.018, 3.351, 5.66) ..cubicTo(3.117, 6.251, 3, 6.864, 3, 7.5) ..lineTo(3, 13.5) ..cubicTo(3, 13.638, 3.049, 13.756, 3.146, 13.854) ..cubicTo(3.244, 13.951, 3.362, 14, 3.5, 14) ..cubicTo(3.638, 14, 3.756, 13.951, 3.854, 13.854) ..cubicTo(3.951, 13.756, 4, 13.638, 4, 13.5) ..lineTo(4, 8.5) ..cubicTo(4, 8.384, 4.035, 8.281, 4.105, 8.191) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_HairIconPainter old) => old.color != color; } ```