# screw-nut icon Screw nut. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/screw-nut - Category: Tools - Use it for: spare parts, parts, mechanical components, parts inventory - Tags: screw, nut, hex nut, bolt, spare parts, parts, hardware, fastener, components, inventory - Component name: ScrewNutIcon - 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/screw-nut.svg · PNG https://gentleface.com/png/line-round/16/screw-nut.png · https://gentleface.com/png/line-round/32/screw-nut.png · https://gentleface.com/png/line-round/48/screw-nut.png - line-soft: https://gentleface.com/svg/line-soft/16/screw-nut.svg · PNG https://gentleface.com/png/line-soft/16/screw-nut.png · https://gentleface.com/png/line-soft/32/screw-nut.png · https://gentleface.com/png/line-soft/48/screw-nut.png - line-sharp: https://gentleface.com/svg/line-sharp/16/screw-nut.svg · PNG https://gentleface.com/png/line-sharp/16/screw-nut.png · https://gentleface.com/png/line-sharp/32/screw-nut.png · https://gentleface.com/png/line-sharp/48/screw-nut.png - solid-round: https://gentleface.com/svg/solid-round/16/screw-nut.svg · PNG https://gentleface.com/png/solid-round/16/screw-nut.png · https://gentleface.com/png/solid-round/32/screw-nut.png · https://gentleface.com/png/solid-round/48/screw-nut.png - solid-soft: https://gentleface.com/svg/solid-soft/16/screw-nut.svg · PNG https://gentleface.com/png/solid-soft/16/screw-nut.png · https://gentleface.com/png/solid-soft/32/screw-nut.png · https://gentleface.com/png/solid-soft/48/screw-nut.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/screw-nut.svg · PNG https://gentleface.com/png/solid-sharp/16/screw-nut.png · https://gentleface.com/png/solid-sharp/32/screw-nut.png · https://gentleface.com/png/solid-sharp/48/screw-nut.png The SVG of every style: https://gentleface.com/icons/screw-nut.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 "screw-nut" (line-round), MIT. https://gentleface.com/icons/screw-nut import type { SVGProps } from 'react'; export function ScrewNutIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "screw-nut" (line-round), MIT. https://gentleface.com/icons/screw-nut. Takes the text color. */ .icon-screw-nut { 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='M9.856 1.144C9.952 1.241 10 1.359 10 1.5L10 3.5C10 3.641 9.952 3.759 9.856 3.856C9.759 3.952 9.641 4 9.5 4L8 4L8 9.5C8 10.245 7.833 10.951 7.5 11.618L5.947 14.724C5.898 14.823 5.823 14.898 5.724 14.947C5.6 15.009 5.473 15.018 5.342 14.974C5.211 14.931 5.115 14.847 5.053 14.724L3.5 11.618C3.167 10.951 3 10.245 3 9.5L3 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L9.5 1C9.641 1 9.759 1.048 9.856 1.144ZM9 2L2 2L2 3L9 3L9 2ZM4 4L4 6.691L7 5.191L7 4L4 4ZM7 8.191L7 6.309L4 7.809L4 9.5C4 9.563 4.002 9.626 4.005 9.689L7 8.191ZM13.9 13.443L12.257 14.429C12.177 14.477 12.092 14.501 12 14.501C11.908 14.501 11.823 14.477 11.743 14.429L10.1 13.443C9.759 13.238 9.49 12.963 9.294 12.617C9.098 12.27 9 11.898 9 11.5L9 10.5C9 10.102 9.098 9.73 9.294 9.383C9.49 9.037 9.759 8.762 10.1 8.557L11.743 7.571C11.823 7.523 11.908 7.499 12 7.499C12.092 7.499 12.177 7.523 12.257 7.571L13.9 8.557C14.241 8.762 14.51 9.037 14.706 9.383C14.902 9.73 15 10.102 15 10.5L15 11.5C15 11.898 14.902 12.27 14.706 12.617C14.51 12.963 14.241 13.238 13.9 13.443ZM10.164 9.876C10.055 10.07 10 10.278 10 10.5L10 11.5C10 11.722 10.055 11.93 10.164 12.124C10.274 12.317 10.424 12.471 10.615 12.586L12 13.417L13.385 12.586C13.576 12.471 13.726 12.317 13.836 12.124C13.945 11.93 14 11.722 14 11.5L14 10.5C14 10.278 13.945 10.07 13.836 9.876C13.726 9.683 13.576 9.529 13.385 9.414L12 8.583L10.615 9.414C10.424 9.529 10.274 9.683 10.164 9.876ZM6.606 11.171C6.869 10.645 7 10.088 7 9.5L7 9.309L4.2 10.709C4.254 10.866 4.319 11.019 4.394 11.171L5.5 13.382L6.606 11.171ZM11.293 10.293C11.488 10.098 11.724 10 12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11C13 11.276 12.902 11.512 12.707 11.707C12.512 11.902 12.276 12 12 12C11.724 12 11.488 11.902 11.293 11.707C11.098 11.512 11 11.276 11 11C11 10.724 11.098 10.488 11.293 10.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='M9.856 1.144C9.952 1.241 10 1.359 10 1.5L10 3.5C10 3.641 9.952 3.759 9.856 3.856C9.759 3.952 9.641 4 9.5 4L8 4L8 9.5C8 10.245 7.833 10.951 7.5 11.618L5.947 14.724C5.898 14.823 5.823 14.898 5.724 14.947C5.6 15.009 5.473 15.018 5.342 14.974C5.211 14.931 5.115 14.847 5.053 14.724L3.5 11.618C3.167 10.951 3 10.245 3 9.5L3 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L9.5 1C9.641 1 9.759 1.048 9.856 1.144ZM9 2L2 2L2 3L9 3L9 2ZM4 4L4 6.691L7 5.191L7 4L4 4ZM7 8.191L7 6.309L4 7.809L4 9.5C4 9.563 4.002 9.626 4.005 9.689L7 8.191ZM13.9 13.443L12.257 14.429C12.177 14.477 12.092 14.501 12 14.501C11.908 14.501 11.823 14.477 11.743 14.429L10.1 13.443C9.759 13.238 9.49 12.963 9.294 12.617C9.098 12.27 9 11.898 9 11.5L9 10.5C9 10.102 9.098 9.73 9.294 9.383C9.49 9.037 9.759 8.762 10.1 8.557L11.743 7.571C11.823 7.523 11.908 7.499 12 7.499C12.092 7.499 12.177 7.523 12.257 7.571L13.9 8.557C14.241 8.762 14.51 9.037 14.706 9.383C14.902 9.73 15 10.102 15 10.5L15 11.5C15 11.898 14.902 12.27 14.706 12.617C14.51 12.963 14.241 13.238 13.9 13.443ZM10.164 9.876C10.055 10.07 10 10.278 10 10.5L10 11.5C10 11.722 10.055 11.93 10.164 12.124C10.274 12.317 10.424 12.471 10.615 12.586L12 13.417L13.385 12.586C13.576 12.471 13.726 12.317 13.836 12.124C13.945 11.93 14 11.722 14 11.5L14 10.5C14 10.278 13.945 10.07 13.836 9.876C13.726 9.683 13.576 9.529 13.385 9.414L12 8.583L10.615 9.414C10.424 9.529 10.274 9.683 10.164 9.876ZM6.606 11.171C6.869 10.645 7 10.088 7 9.5L7 9.309L4.2 10.709C4.254 10.866 4.319 11.019 4.394 11.171L5.5 13.382L6.606 11.171ZM11.293 10.293C11.488 10.098 11.724 10 12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11C13 11.276 12.902 11.512 12.707 11.707C12.512 11.902 12.276 12 12 12C11.724 12 11.488 11.902 11.293 11.707C11.098 11.512 11 11.276 11 11C11 10.724 11.098 10.488 11.293 10.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='M9.856 1.144C9.952 1.241 10 1.359 10 1.5L10 3.5C10 3.641 9.952 3.759 9.856 3.856C9.759 3.952 9.641 4 9.5 4L8 4L8 9.5C8 10.245 7.833 10.951 7.5 11.618L5.947 14.724C5.898 14.823 5.823 14.898 5.724 14.947C5.6 15.009 5.473 15.018 5.342 14.974C5.211 14.931 5.115 14.847 5.053 14.724L3.5 11.618C3.167 10.951 3 10.245 3 9.5L3 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L9.5 1C9.641 1 9.759 1.048 9.856 1.144ZM9 2L2 2L2 3L9 3L9 2ZM4 4L4 6.691L7 5.191L7 4L4 4ZM7 8.191L7 6.309L4 7.809L4 9.5C4 9.563 4.002 9.626 4.005 9.689L7 8.191ZM13.9 13.443L12.257 14.429C12.177 14.477 12.092 14.501 12 14.501C11.908 14.501 11.823 14.477 11.743 14.429L10.1 13.443C9.759 13.238 9.49 12.963 9.294 12.617C9.098 12.27 9 11.898 9 11.5L9 10.5C9 10.102 9.098 9.73 9.294 9.383C9.49 9.037 9.759 8.762 10.1 8.557L11.743 7.571C11.823 7.523 11.908 7.499 12 7.499C12.092 7.499 12.177 7.523 12.257 7.571L13.9 8.557C14.241 8.762 14.51 9.037 14.706 9.383C14.902 9.73 15 10.102 15 10.5L15 11.5C15 11.898 14.902 12.27 14.706 12.617C14.51 12.963 14.241 13.238 13.9 13.443ZM10.164 9.876C10.055 10.07 10 10.278 10 10.5L10 11.5C10 11.722 10.055 11.93 10.164 12.124C10.274 12.317 10.424 12.471 10.615 12.586L12 13.417L13.385 12.586C13.576 12.471 13.726 12.317 13.836 12.124C13.945 11.93 14 11.722 14 11.5L14 10.5C14 10.278 13.945 10.07 13.836 9.876C13.726 9.683 13.576 9.529 13.385 9.414L12 8.583L10.615 9.414C10.424 9.529 10.274 9.683 10.164 9.876ZM6.606 11.171C6.869 10.645 7 10.088 7 9.5L7 9.309L4.2 10.709C4.254 10.866 4.319 11.019 4.394 11.171L5.5 13.382L6.606 11.171ZM11.293 10.293C11.488 10.098 11.724 10 12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11C13 11.276 12.902 11.512 12.707 11.707C12.512 11.902 12.276 12 12 12C11.724 12 11.488 11.902 11.293 11.707C11.098 11.512 11 11.276 11 11C11 10.724 11.098 10.488 11.293 10.293Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "screw-nut" (line-round), MIT. https://gentleface.com/icons/screw-nut import SwiftUI struct ScrewNutIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 9.856, y: 1.144)) p.addCurve(to: CGPoint(x: 10, y: 1.5), control1: CGPoint(x: 9.952, y: 1.241), control2: CGPoint(x: 10, y: 1.359)) p.addLine(to: CGPoint(x: 10, y: 3.5)) p.addCurve(to: CGPoint(x: 9.856, y: 3.856), control1: CGPoint(x: 10, y: 3.641), control2: CGPoint(x: 9.952, y: 3.759)) p.addCurve(to: CGPoint(x: 9.5, y: 4), control1: CGPoint(x: 9.759, y: 3.952), control2: CGPoint(x: 9.641, y: 4)) p.addLine(to: CGPoint(x: 8, y: 4)) p.addLine(to: CGPoint(x: 8, y: 9.5)) p.addCurve(to: CGPoint(x: 7.5, y: 11.618), control1: CGPoint(x: 8, y: 10.245), control2: CGPoint(x: 7.833, y: 10.951)) p.addLine(to: CGPoint(x: 5.947, y: 14.724)) p.addCurve(to: CGPoint(x: 5.724, y: 14.947), control1: CGPoint(x: 5.898, y: 14.823), control2: CGPoint(x: 5.823, y: 14.898)) p.addCurve(to: CGPoint(x: 5.342, y: 14.974), control1: CGPoint(x: 5.6, y: 15.009), control2: CGPoint(x: 5.473, y: 15.018)) p.addCurve(to: CGPoint(x: 5.053, y: 14.724), control1: CGPoint(x: 5.211, y: 14.931), control2: CGPoint(x: 5.115, y: 14.847)) p.addLine(to: CGPoint(x: 3.5, y: 11.618)) p.addCurve(to: CGPoint(x: 3, y: 9.5), control1: CGPoint(x: 3.167, y: 10.951), control2: CGPoint(x: 3, y: 10.245)) p.addLine(to: CGPoint(x: 3, y: 4)) p.addLine(to: CGPoint(x: 1.5, y: 4)) p.addCurve(to: CGPoint(x: 1.144, y: 3.856), control1: CGPoint(x: 1.359, y: 4), control2: CGPoint(x: 1.241, y: 3.952)) p.addCurve(to: CGPoint(x: 1, y: 3.5), control1: CGPoint(x: 1.048, y: 3.759), control2: CGPoint(x: 1, y: 3.641)) p.addLine(to: CGPoint(x: 1, y: 1.5)) p.addCurve(to: CGPoint(x: 1.144, y: 1.144), control1: CGPoint(x: 1, y: 1.359), control2: CGPoint(x: 1.048, y: 1.241)) p.addCurve(to: CGPoint(x: 1.5, y: 1), control1: CGPoint(x: 1.241, y: 1.048), control2: CGPoint(x: 1.359, y: 1)) p.addLine(to: CGPoint(x: 9.5, y: 1)) p.addCurve(to: CGPoint(x: 9.856, y: 1.144), control1: CGPoint(x: 9.641, y: 1), control2: CGPoint(x: 9.759, y: 1.048)) p.closeSubpath() p.move(to: CGPoint(x: 9, y: 2)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addLine(to: CGPoint(x: 2, y: 3)) p.addLine(to: CGPoint(x: 9, y: 3)) p.addLine(to: CGPoint(x: 9, y: 2)) p.closeSubpath() p.move(to: CGPoint(x: 4, y: 4)) p.addLine(to: CGPoint(x: 4, y: 6.691)) p.addLine(to: CGPoint(x: 7, y: 5.191)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addLine(to: CGPoint(x: 4, y: 4)) p.closeSubpath() p.move(to: CGPoint(x: 7, y: 8.191)) p.addLine(to: CGPoint(x: 7, y: 6.309)) p.addLine(to: CGPoint(x: 4, y: 7.809)) p.addLine(to: CGPoint(x: 4, y: 9.5)) p.addCurve(to: CGPoint(x: 4.005, y: 9.689), control1: CGPoint(x: 4, y: 9.563), control2: CGPoint(x: 4.002, y: 9.626)) p.addLine(to: CGPoint(x: 7, y: 8.191)) p.closeSubpath() p.move(to: CGPoint(x: 13.9, y: 13.443)) p.addLine(to: CGPoint(x: 12.257, y: 14.429)) p.addCurve(to: CGPoint(x: 12, y: 14.501), control1: CGPoint(x: 12.177, y: 14.477), control2: CGPoint(x: 12.092, y: 14.501)) p.addCurve(to: CGPoint(x: 11.743, y: 14.429), control1: CGPoint(x: 11.908, y: 14.501), control2: CGPoint(x: 11.823, y: 14.477)) p.addLine(to: CGPoint(x: 10.1, y: 13.443)) p.addCurve(to: CGPoint(x: 9.294, y: 12.617), control1: CGPoint(x: 9.759, y: 13.238), control2: CGPoint(x: 9.49, y: 12.963)) p.addCurve(to: CGPoint(x: 9, y: 11.5), control1: CGPoint(x: 9.098, y: 12.27), control2: CGPoint(x: 9, y: 11.898)) p.addLine(to: CGPoint(x: 9, y: 10.5)) p.addCurve(to: CGPoint(x: 9.294, y: 9.383), control1: CGPoint(x: 9, y: 10.102), control2: CGPoint(x: 9.098, y: 9.73)) p.addCurve(to: CGPoint(x: 10.1, y: 8.557), control1: CGPoint(x: 9.49, y: 9.037), control2: CGPoint(x: 9.759, y: 8.762)) p.addLine(to: CGPoint(x: 11.743, y: 7.571)) p.addCurve(to: CGPoint(x: 12, y: 7.499), control1: CGPoint(x: 11.823, y: 7.523), control2: CGPoint(x: 11.908, y: 7.499)) p.addCurve(to: CGPoint(x: 12.257, y: 7.571), control1: CGPoint(x: 12.092, y: 7.499), control2: CGPoint(x: 12.177, y: 7.523)) p.addLine(to: CGPoint(x: 13.9, y: 8.557)) p.addCurve(to: CGPoint(x: 14.706, y: 9.383), control1: CGPoint(x: 14.241, y: 8.762), control2: CGPoint(x: 14.51, y: 9.037)) p.addCurve(to: CGPoint(x: 15, y: 10.5), control1: CGPoint(x: 14.902, y: 9.73), control2: CGPoint(x: 15, y: 10.102)) p.addLine(to: CGPoint(x: 15, y: 11.5)) p.addCurve(to: CGPoint(x: 14.706, y: 12.617), control1: CGPoint(x: 15, y: 11.898), control2: CGPoint(x: 14.902, y: 12.27)) p.addCurve(to: CGPoint(x: 13.9, y: 13.443), control1: CGPoint(x: 14.51, y: 12.963), control2: CGPoint(x: 14.241, y: 13.238)) p.closeSubpath() p.move(to: CGPoint(x: 10.164, y: 9.876)) p.addCurve(to: CGPoint(x: 10, y: 10.5), control1: CGPoint(x: 10.055, y: 10.07), control2: CGPoint(x: 10, y: 10.278)) p.addLine(to: CGPoint(x: 10, y: 11.5)) p.addCurve(to: CGPoint(x: 10.164, y: 12.124), control1: CGPoint(x: 10, y: 11.722), control2: CGPoint(x: 10.055, y: 11.93)) p.addCurve(to: CGPoint(x: 10.615, y: 12.586), control1: CGPoint(x: 10.274, y: 12.317), control2: CGPoint(x: 10.424, y: 12.471)) p.addLine(to: CGPoint(x: 12, y: 13.417)) p.addLine(to: CGPoint(x: 13.385, y: 12.586)) p.addCurve(to: CGPoint(x: 13.836, y: 12.124), control1: CGPoint(x: 13.576, y: 12.471), control2: CGPoint(x: 13.726, y: 12.317)) p.addCurve(to: CGPoint(x: 14, y: 11.5), control1: CGPoint(x: 13.945, y: 11.93), control2: CGPoint(x: 14, y: 11.722)) p.addLine(to: CGPoint(x: 14, y: 10.5)) p.addCurve(to: CGPoint(x: 13.836, y: 9.876), control1: CGPoint(x: 14, y: 10.278), control2: CGPoint(x: 13.945, y: 10.07)) p.addCurve(to: CGPoint(x: 13.385, y: 9.414), control1: CGPoint(x: 13.726, y: 9.683), control2: CGPoint(x: 13.576, y: 9.529)) p.addLine(to: CGPoint(x: 12, y: 8.583)) p.addLine(to: CGPoint(x: 10.615, y: 9.414)) p.addCurve(to: CGPoint(x: 10.164, y: 9.876), control1: CGPoint(x: 10.424, y: 9.529), control2: CGPoint(x: 10.274, y: 9.683)) p.closeSubpath() p.move(to: CGPoint(x: 6.606, y: 11.171)) p.addCurve(to: CGPoint(x: 7, y: 9.5), control1: CGPoint(x: 6.869, y: 10.645), control2: CGPoint(x: 7, y: 10.088)) p.addLine(to: CGPoint(x: 7, y: 9.309)) p.addLine(to: CGPoint(x: 4.2, y: 10.709)) p.addCurve(to: CGPoint(x: 4.394, y: 11.171), control1: CGPoint(x: 4.254, y: 10.866), control2: CGPoint(x: 4.319, y: 11.019)) p.addLine(to: CGPoint(x: 5.5, y: 13.382)) p.addLine(to: CGPoint(x: 6.606, y: 11.171)) p.closeSubpath() p.move(to: CGPoint(x: 11.293, y: 10.293)) p.addCurve(to: CGPoint(x: 12, y: 10), control1: CGPoint(x: 11.488, y: 10.098), control2: CGPoint(x: 11.724, y: 10)) p.addCurve(to: CGPoint(x: 12.707, y: 10.293), control1: CGPoint(x: 12.276, y: 10), control2: CGPoint(x: 12.512, y: 10.098)) p.addCurve(to: CGPoint(x: 13, y: 11), control1: CGPoint(x: 12.902, y: 10.488), control2: CGPoint(x: 13, y: 10.724)) p.addCurve(to: CGPoint(x: 12.707, y: 11.707), control1: CGPoint(x: 13, y: 11.276), control2: CGPoint(x: 12.902, y: 11.512)) p.addCurve(to: CGPoint(x: 12, y: 12), control1: CGPoint(x: 12.512, y: 11.902), control2: CGPoint(x: 12.276, y: 12)) p.addCurve(to: CGPoint(x: 11.293, y: 11.707), control1: CGPoint(x: 11.724, y: 12), control2: CGPoint(x: 11.488, y: 11.902)) p.addCurve(to: CGPoint(x: 11, y: 11), control1: CGPoint(x: 11.098, y: 11.512), control2: CGPoint(x: 11, y: 11.276)) p.addCurve(to: CGPoint(x: 11.293, y: 10.293), control1: CGPoint(x: 11, y: 10.724), control2: CGPoint(x: 11.098, y: 10.488)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ScrewNutIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "screw-nut" (line-round), MIT. https://gentleface.com/icons/screw-nut 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 ScrewNutIcon: ImageVector by lazy { ImageVector.Builder( name = "screw-nut", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M9.856 1.144C9.952 1.241 10 1.359 10 1.5L10 3.5C10 3.641 9.952 3.759 9.856 3.856C9.759 3.952 9.641 4 9.5 4L8 4L8 9.5C8 10.245 7.833 10.951 7.5 11.618L5.947 14.724C5.898 14.823 5.823 14.898 5.724 14.947C5.6 15.009 5.473 15.018 5.342 14.974C5.211 14.931 5.115 14.847 5.053 14.724L3.5 11.618C3.167 10.951 3 10.245 3 9.5L3 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L9.5 1C9.641 1 9.759 1.048 9.856 1.144ZM9 2L2 2L2 3L9 3L9 2ZM4 4L4 6.691L7 5.191L7 4L4 4ZM7 8.191L7 6.309L4 7.809L4 9.5C4 9.563 4.002 9.626 4.005 9.689L7 8.191ZM13.9 13.443L12.257 14.429C12.177 14.477 12.092 14.501 12 14.501C11.908 14.501 11.823 14.477 11.743 14.429L10.1 13.443C9.759 13.238 9.49 12.963 9.294 12.617C9.098 12.27 9 11.898 9 11.5L9 10.5C9 10.102 9.098 9.73 9.294 9.383C9.49 9.037 9.759 8.762 10.1 8.557L11.743 7.571C11.823 7.523 11.908 7.499 12 7.499C12.092 7.499 12.177 7.523 12.257 7.571L13.9 8.557C14.241 8.762 14.51 9.037 14.706 9.383C14.902 9.73 15 10.102 15 10.5L15 11.5C15 11.898 14.902 12.27 14.706 12.617C14.51 12.963 14.241 13.238 13.9 13.443ZM10.164 9.876C10.055 10.07 10 10.278 10 10.5L10 11.5C10 11.722 10.055 11.93 10.164 12.124C10.274 12.317 10.424 12.471 10.615 12.586L12 13.417L13.385 12.586C13.576 12.471 13.726 12.317 13.836 12.124C13.945 11.93 14 11.722 14 11.5L14 10.5C14 10.278 13.945 10.07 13.836 9.876C13.726 9.683 13.576 9.529 13.385 9.414L12 8.583L10.615 9.414C10.424 9.529 10.274 9.683 10.164 9.876ZM6.606 11.171C6.869 10.645 7 10.088 7 9.5L7 9.309L4.2 10.709C4.254 10.866 4.319 11.019 4.394 11.171L5.5 13.382L6.606 11.171ZM11.293 10.293C11.488 10.098 11.724 10 12 10C12.276 10 12.512 10.098 12.707 10.293C12.902 10.488 13 10.724 13 11C13 11.276 12.902 11.512 12.707 11.707C12.512 11.902 12.276 12 12 12C11.724 12 11.488 11.902 11.293 11.707C11.098 11.512 11 11.276 11 11C11 10.724 11.098 10.488 11.293 10.293Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ScrewNutIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "screw-nut" (line-round), MIT. https://gentleface.com/icons/screw-nut import 'package:flutter/widgets.dart'; class ScrewNutIcon extends StatelessWidget { const ScrewNutIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ScrewNutIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ScrewNutIconPainter extends CustomPainter { _ScrewNutIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(9.856, 1.144) ..cubicTo(9.952, 1.241, 10, 1.359, 10, 1.5) ..lineTo(10, 3.5) ..cubicTo(10, 3.641, 9.952, 3.759, 9.856, 3.856) ..cubicTo(9.759, 3.952, 9.641, 4, 9.5, 4) ..lineTo(8, 4) ..lineTo(8, 9.5) ..cubicTo(8, 10.245, 7.833, 10.951, 7.5, 11.618) ..lineTo(5.947, 14.724) ..cubicTo(5.898, 14.823, 5.823, 14.898, 5.724, 14.947) ..cubicTo(5.6, 15.009, 5.473, 15.018, 5.342, 14.974) ..cubicTo(5.211, 14.931, 5.115, 14.847, 5.053, 14.724) ..lineTo(3.5, 11.618) ..cubicTo(3.167, 10.951, 3, 10.245, 3, 9.5) ..lineTo(3, 4) ..lineTo(1.5, 4) ..cubicTo(1.359, 4, 1.241, 3.952, 1.144, 3.856) ..cubicTo(1.048, 3.759, 1, 3.641, 1, 3.5) ..lineTo(1, 1.5) ..cubicTo(1, 1.359, 1.048, 1.241, 1.144, 1.144) ..cubicTo(1.241, 1.048, 1.359, 1, 1.5, 1) ..lineTo(9.5, 1) ..cubicTo(9.641, 1, 9.759, 1.048, 9.856, 1.144) ..close() ..moveTo(9, 2) ..lineTo(2, 2) ..lineTo(2, 3) ..lineTo(9, 3) ..lineTo(9, 2) ..close() ..moveTo(4, 4) ..lineTo(4, 6.691) ..lineTo(7, 5.191) ..lineTo(7, 4) ..lineTo(4, 4) ..close() ..moveTo(7, 8.191) ..lineTo(7, 6.309) ..lineTo(4, 7.809) ..lineTo(4, 9.5) ..cubicTo(4, 9.563, 4.002, 9.626, 4.005, 9.689) ..lineTo(7, 8.191) ..close() ..moveTo(13.9, 13.443) ..lineTo(12.257, 14.429) ..cubicTo(12.177, 14.477, 12.092, 14.501, 12, 14.501) ..cubicTo(11.908, 14.501, 11.823, 14.477, 11.743, 14.429) ..lineTo(10.1, 13.443) ..cubicTo(9.759, 13.238, 9.49, 12.963, 9.294, 12.617) ..cubicTo(9.098, 12.27, 9, 11.898, 9, 11.5) ..lineTo(9, 10.5) ..cubicTo(9, 10.102, 9.098, 9.73, 9.294, 9.383) ..cubicTo(9.49, 9.037, 9.759, 8.762, 10.1, 8.557) ..lineTo(11.743, 7.571) ..cubicTo(11.823, 7.523, 11.908, 7.499, 12, 7.499) ..cubicTo(12.092, 7.499, 12.177, 7.523, 12.257, 7.571) ..lineTo(13.9, 8.557) ..cubicTo(14.241, 8.762, 14.51, 9.037, 14.706, 9.383) ..cubicTo(14.902, 9.73, 15, 10.102, 15, 10.5) ..lineTo(15, 11.5) ..cubicTo(15, 11.898, 14.902, 12.27, 14.706, 12.617) ..cubicTo(14.51, 12.963, 14.241, 13.238, 13.9, 13.443) ..close() ..moveTo(10.164, 9.876) ..cubicTo(10.055, 10.07, 10, 10.278, 10, 10.5) ..lineTo(10, 11.5) ..cubicTo(10, 11.722, 10.055, 11.93, 10.164, 12.124) ..cubicTo(10.274, 12.317, 10.424, 12.471, 10.615, 12.586) ..lineTo(12, 13.417) ..lineTo(13.385, 12.586) ..cubicTo(13.576, 12.471, 13.726, 12.317, 13.836, 12.124) ..cubicTo(13.945, 11.93, 14, 11.722, 14, 11.5) ..lineTo(14, 10.5) ..cubicTo(14, 10.278, 13.945, 10.07, 13.836, 9.876) ..cubicTo(13.726, 9.683, 13.576, 9.529, 13.385, 9.414) ..lineTo(12, 8.583) ..lineTo(10.615, 9.414) ..cubicTo(10.424, 9.529, 10.274, 9.683, 10.164, 9.876) ..close() ..moveTo(6.606, 11.171) ..cubicTo(6.869, 10.645, 7, 10.088, 7, 9.5) ..lineTo(7, 9.309) ..lineTo(4.2, 10.709) ..cubicTo(4.254, 10.866, 4.319, 11.019, 4.394, 11.171) ..lineTo(5.5, 13.382) ..lineTo(6.606, 11.171) ..close() ..moveTo(11.293, 10.293) ..cubicTo(11.488, 10.098, 11.724, 10, 12, 10) ..cubicTo(12.276, 10, 12.512, 10.098, 12.707, 10.293) ..cubicTo(12.902, 10.488, 13, 10.724, 13, 11) ..cubicTo(13, 11.276, 12.902, 11.512, 12.707, 11.707) ..cubicTo(12.512, 11.902, 12.276, 12, 12, 12) ..cubicTo(11.724, 12, 11.488, 11.902, 11.293, 11.707) ..cubicTo(11.098, 11.512, 11, 11.276, 11, 11) ..cubicTo(11, 10.724, 11.098, 10.488, 11.293, 10.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ScrewNutIconPainter old) => old.color != color; } ```