# boot-buckle icon Boot buckle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/boot-buckle - Category: Shopping - Use it for: boot buckle, buckle boot, strap boot - Built from: variant of boot - Tags: boot, boots, footwear, buckle, strap, ankle boot, shoe - Family: boot - Component name: BootBuckleIcon - 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/boot-buckle.svg · PNG https://gentleface.com/png/line-round/16/boot-buckle.png · https://gentleface.com/png/line-round/32/boot-buckle.png · https://gentleface.com/png/line-round/48/boot-buckle.png - line-soft: https://gentleface.com/svg/line-soft/16/boot-buckle.svg · PNG https://gentleface.com/png/line-soft/16/boot-buckle.png · https://gentleface.com/png/line-soft/32/boot-buckle.png · https://gentleface.com/png/line-soft/48/boot-buckle.png - line-sharp: https://gentleface.com/svg/line-sharp/16/boot-buckle.svg · PNG https://gentleface.com/png/line-sharp/16/boot-buckle.png · https://gentleface.com/png/line-sharp/32/boot-buckle.png · https://gentleface.com/png/line-sharp/48/boot-buckle.png - solid-round: https://gentleface.com/svg/solid-round/16/boot-buckle.svg · PNG https://gentleface.com/png/solid-round/16/boot-buckle.png · https://gentleface.com/png/solid-round/32/boot-buckle.png · https://gentleface.com/png/solid-round/48/boot-buckle.png - solid-soft: https://gentleface.com/svg/solid-soft/16/boot-buckle.svg · PNG https://gentleface.com/png/solid-soft/16/boot-buckle.png · https://gentleface.com/png/solid-soft/32/boot-buckle.png · https://gentleface.com/png/solid-soft/48/boot-buckle.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/boot-buckle.svg · PNG https://gentleface.com/png/solid-sharp/16/boot-buckle.png · https://gentleface.com/png/solid-sharp/32/boot-buckle.png · https://gentleface.com/png/solid-sharp/48/boot-buckle.png The SVG of every style: https://gentleface.com/icons/boot-buckle.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 "boot-buckle" (line-round), MIT. https://gentleface.com/icons/boot-buckle import type { SVGProps } from 'react'; export function BootBuckleIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "boot-buckle" (line-round), MIT. https://gentleface.com/icons/boot-buckle. Takes the text color. */ .icon-boot-buckle { 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.561 14.561C14.414 14.707 14.245 14.818 14.052 14.895C13.875 14.965 13.691 15 13.5 15L2.5 15C2.309 15 2.125 14.965 1.948 14.895C1.755 14.818 1.586 14.707 1.439 14.561C1.293 14.414 1.182 14.245 1.105 14.052C1.035 13.875 1 13.691 1 13.5L1 12.5C1 12.446 1.009 12.393 1.026 12.342C1.191 11.846 1.312 11.472 1.389 11.221C1.516 10.807 1.62 10.425 1.7 10.075C1.9 9.209 2 8.351 2 7.5L2 3C2 2.746 2.047 2.5 2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5C9 3.002 9.139 4.226 9.417 5.171C9.706 6.152 10.184 6.977 10.854 7.646C11.26 8.053 11.772 8.393 12.391 8.668C12.636 8.777 12.871 8.863 13.094 8.924C13.277 8.975 13.412 9 13.5 9C13.579 9 13.653 9.018 13.724 9.053C14.313 9.348 14.692 9.831 14.86 10.504C14.924 10.759 14.965 11.073 14.984 11.444C14.995 11.66 15 12.013 15 12.5L15 13.5C15 13.691 14.965 13.875 14.895 14.052C14.818 14.245 14.707 14.414 14.561 14.561ZM4 5L4 4L4.499 4L4.5 4L7 4L7 5L8.338 5C8.141 4.159 8.03 3.159 8.005 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 5L4 5ZM3 6L3 7.5C3 8.427 2.892 9.36 2.675 10.3C2.589 10.672 2.479 11.077 2.345 11.514C2.305 11.644 2.254 11.807 2.191 12L13.998 12L13.998 11.998C13.995 11.782 13.991 11.614 13.985 11.494C13.97 11.188 13.938 10.939 13.89 10.746C13.841 10.551 13.771 10.392 13.678 10.269C13.598 10.162 13.493 10.07 13.362 9.993C13.21 9.98 13.032 9.945 12.828 9.888C12.557 9.813 12.276 9.711 11.984 9.582C11.253 9.257 10.64 8.847 10.146 8.354C9.486 7.693 8.984 6.909 8.641 6L7 6L7 7L4 7L4 6L3 6ZM2.146 13.854C2.244 13.951 2.362 14 2.5 14L13.5 14C13.638 14 13.756 13.951 13.854 13.854C13.951 13.756 14 13.638 14 13.5L14 13L2 13L2 13.5C2 13.638 2.049 13.756 2.146 13.854Z'/%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.561 14.561C14.414 14.707 14.245 14.818 14.052 14.895C13.875 14.965 13.691 15 13.5 15L2.5 15C2.309 15 2.125 14.965 1.948 14.895C1.755 14.818 1.586 14.707 1.439 14.561C1.293 14.414 1.182 14.245 1.105 14.052C1.035 13.875 1 13.691 1 13.5L1 12.5C1 12.446 1.009 12.393 1.026 12.342C1.191 11.846 1.312 11.472 1.389 11.221C1.516 10.807 1.62 10.425 1.7 10.075C1.9 9.209 2 8.351 2 7.5L2 3C2 2.746 2.047 2.5 2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5C9 3.002 9.139 4.226 9.417 5.171C9.706 6.152 10.184 6.977 10.854 7.646C11.26 8.053 11.772 8.393 12.391 8.668C12.636 8.777 12.871 8.863 13.094 8.924C13.277 8.975 13.412 9 13.5 9C13.579 9 13.653 9.018 13.724 9.053C14.313 9.348 14.692 9.831 14.86 10.504C14.924 10.759 14.965 11.073 14.984 11.444C14.995 11.66 15 12.013 15 12.5L15 13.5C15 13.691 14.965 13.875 14.895 14.052C14.818 14.245 14.707 14.414 14.561 14.561ZM4 5L4 4L4.499 4L4.5 4L7 4L7 5L8.338 5C8.141 4.159 8.03 3.159 8.005 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 5L4 5ZM3 6L3 7.5C3 8.427 2.892 9.36 2.675 10.3C2.589 10.672 2.479 11.077 2.345 11.514C2.305 11.644 2.254 11.807 2.191 12L13.998 12L13.998 11.998C13.995 11.782 13.991 11.614 13.985 11.494C13.97 11.188 13.938 10.939 13.89 10.746C13.841 10.551 13.771 10.392 13.678 10.269C13.598 10.162 13.493 10.07 13.362 9.993C13.21 9.98 13.032 9.945 12.828 9.888C12.557 9.813 12.276 9.711 11.984 9.582C11.253 9.257 10.64 8.847 10.146 8.354C9.486 7.693 8.984 6.909 8.641 6L7 6L7 7L4 7L4 6L3 6ZM2.146 13.854C2.244 13.951 2.362 14 2.5 14L13.5 14C13.638 14 13.756 13.951 13.854 13.854C13.951 13.756 14 13.638 14 13.5L14 13L2 13L2 13.5C2 13.638 2.049 13.756 2.146 13.854Z'/%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.561 14.561C14.414 14.707 14.245 14.818 14.052 14.895C13.875 14.965 13.691 15 13.5 15L2.5 15C2.309 15 2.125 14.965 1.948 14.895C1.755 14.818 1.586 14.707 1.439 14.561C1.293 14.414 1.182 14.245 1.105 14.052C1.035 13.875 1 13.691 1 13.5L1 12.5C1 12.446 1.009 12.393 1.026 12.342C1.191 11.846 1.312 11.472 1.389 11.221C1.516 10.807 1.62 10.425 1.7 10.075C1.9 9.209 2 8.351 2 7.5L2 3C2 2.746 2.047 2.5 2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5C9 3.002 9.139 4.226 9.417 5.171C9.706 6.152 10.184 6.977 10.854 7.646C11.26 8.053 11.772 8.393 12.391 8.668C12.636 8.777 12.871 8.863 13.094 8.924C13.277 8.975 13.412 9 13.5 9C13.579 9 13.653 9.018 13.724 9.053C14.313 9.348 14.692 9.831 14.86 10.504C14.924 10.759 14.965 11.073 14.984 11.444C14.995 11.66 15 12.013 15 12.5L15 13.5C15 13.691 14.965 13.875 14.895 14.052C14.818 14.245 14.707 14.414 14.561 14.561ZM4 5L4 4L4.499 4L4.5 4L7 4L7 5L8.338 5C8.141 4.159 8.03 3.159 8.005 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 5L4 5ZM3 6L3 7.5C3 8.427 2.892 9.36 2.675 10.3C2.589 10.672 2.479 11.077 2.345 11.514C2.305 11.644 2.254 11.807 2.191 12L13.998 12L13.998 11.998C13.995 11.782 13.991 11.614 13.985 11.494C13.97 11.188 13.938 10.939 13.89 10.746C13.841 10.551 13.771 10.392 13.678 10.269C13.598 10.162 13.493 10.07 13.362 9.993C13.21 9.98 13.032 9.945 12.828 9.888C12.557 9.813 12.276 9.711 11.984 9.582C11.253 9.257 10.64 8.847 10.146 8.354C9.486 7.693 8.984 6.909 8.641 6L7 6L7 7L4 7L4 6L3 6ZM2.146 13.854C2.244 13.951 2.362 14 2.5 14L13.5 14C13.638 14 13.756 13.951 13.854 13.854C13.951 13.756 14 13.638 14 13.5L14 13L2 13L2 13.5C2 13.638 2.049 13.756 2.146 13.854Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "boot-buckle" (line-round), MIT. https://gentleface.com/icons/boot-buckle import SwiftUI struct BootBuckleIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.561, y: 14.561)) p.addCurve(to: CGPoint(x: 14.052, y: 14.895), control1: CGPoint(x: 14.414, y: 14.707), control2: CGPoint(x: 14.245, y: 14.818)) p.addCurve(to: CGPoint(x: 13.5, y: 15), control1: CGPoint(x: 13.875, y: 14.965), control2: CGPoint(x: 13.691, y: 15)) p.addLine(to: CGPoint(x: 2.5, y: 15)) p.addCurve(to: CGPoint(x: 1.948, y: 14.895), control1: CGPoint(x: 2.309, y: 15), control2: CGPoint(x: 2.125, y: 14.965)) p.addCurve(to: CGPoint(x: 1.439, y: 14.561), control1: CGPoint(x: 1.755, y: 14.818), control2: CGPoint(x: 1.586, y: 14.707)) p.addCurve(to: CGPoint(x: 1.105, y: 14.052), control1: CGPoint(x: 1.293, y: 14.414), control2: CGPoint(x: 1.182, y: 14.245)) p.addCurve(to: CGPoint(x: 1, y: 13.5), control1: CGPoint(x: 1.035, y: 13.875), control2: CGPoint(x: 1, y: 13.691)) p.addLine(to: CGPoint(x: 1, y: 12.5)) p.addCurve(to: CGPoint(x: 1.026, y: 12.342), control1: CGPoint(x: 1, y: 12.446), control2: CGPoint(x: 1.009, y: 12.393)) p.addCurve(to: CGPoint(x: 1.389, y: 11.221), control1: CGPoint(x: 1.191, y: 11.846), control2: CGPoint(x: 1.312, y: 11.472)) p.addCurve(to: CGPoint(x: 1.7, y: 10.075), control1: CGPoint(x: 1.516, y: 10.807), control2: CGPoint(x: 1.62, y: 10.425)) p.addCurve(to: CGPoint(x: 2, y: 7.5), control1: CGPoint(x: 1.9, y: 9.209), control2: CGPoint(x: 2, y: 8.351)) p.addLine(to: CGPoint(x: 2, y: 3)) p.addCurve(to: CGPoint(x: 2.14, y: 2.264), control1: CGPoint(x: 2, y: 2.746), control2: CGPoint(x: 2.047, y: 2.5)) p.addCurve(to: CGPoint(x: 2.586, y: 1.586), control1: CGPoint(x: 2.242, y: 2.007), control2: CGPoint(x: 2.391, y: 1.781)) p.addCurve(to: CGPoint(x: 3.264, y: 1.14), control1: CGPoint(x: 2.781, y: 1.391), control2: CGPoint(x: 3.007, y: 1.242)) p.addCurve(to: CGPoint(x: 4, y: 1), control1: CGPoint(x: 3.5, y: 1.047), control2: CGPoint(x: 3.746, y: 1)) p.addLine(to: CGPoint(x: 8.5, y: 1)) p.addCurve(to: CGPoint(x: 8.856, y: 1.144), control1: CGPoint(x: 8.641, y: 1), control2: CGPoint(x: 8.759, y: 1.048)) p.addCurve(to: CGPoint(x: 9, y: 1.5), control1: CGPoint(x: 8.952, y: 1.241), control2: CGPoint(x: 9, y: 1.359)) p.addCurve(to: CGPoint(x: 9.417, y: 5.171), control1: CGPoint(x: 9, y: 3.002), control2: CGPoint(x: 9.139, y: 4.226)) p.addCurve(to: CGPoint(x: 10.854, y: 7.646), control1: CGPoint(x: 9.706, y: 6.152), control2: CGPoint(x: 10.184, y: 6.977)) p.addCurve(to: CGPoint(x: 12.391, y: 8.668), control1: CGPoint(x: 11.26, y: 8.053), control2: CGPoint(x: 11.772, y: 8.393)) p.addCurve(to: CGPoint(x: 13.094, y: 8.924), control1: CGPoint(x: 12.636, y: 8.777), control2: CGPoint(x: 12.871, y: 8.863)) p.addCurve(to: CGPoint(x: 13.5, y: 9), control1: CGPoint(x: 13.277, y: 8.975), control2: CGPoint(x: 13.412, y: 9)) p.addCurve(to: CGPoint(x: 13.724, y: 9.053), control1: CGPoint(x: 13.579, y: 9), control2: CGPoint(x: 13.653, y: 9.018)) p.addCurve(to: CGPoint(x: 14.86, y: 10.504), control1: CGPoint(x: 14.313, y: 9.348), control2: CGPoint(x: 14.692, y: 9.831)) p.addCurve(to: CGPoint(x: 14.984, y: 11.444), control1: CGPoint(x: 14.924, y: 10.759), control2: CGPoint(x: 14.965, y: 11.073)) p.addCurve(to: CGPoint(x: 15, y: 12.5), control1: CGPoint(x: 14.995, y: 11.66), control2: CGPoint(x: 15, y: 12.013)) p.addLine(to: CGPoint(x: 15, y: 13.5)) p.addCurve(to: CGPoint(x: 14.895, y: 14.052), control1: CGPoint(x: 15, y: 13.691), control2: CGPoint(x: 14.965, y: 13.875)) p.addCurve(to: CGPoint(x: 14.561, y: 14.561), control1: CGPoint(x: 14.818, y: 14.245), control2: CGPoint(x: 14.707, y: 14.414)) p.closeSubpath() p.move(to: CGPoint(x: 4, y: 5)) p.addLine(to: CGPoint(x: 4, y: 4)) p.addLine(to: CGPoint(x: 4.499, y: 4)) p.addLine(to: CGPoint(x: 4.5, y: 4)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addLine(to: CGPoint(x: 7, y: 5)) p.addLine(to: CGPoint(x: 8.338, y: 5)) p.addCurve(to: CGPoint(x: 8.005, y: 2), control1: CGPoint(x: 8.141, y: 4.159), control2: CGPoint(x: 8.03, y: 3.159)) p.addLine(to: CGPoint(x: 4, y: 2)) p.addCurve(to: CGPoint(x: 3.293, y: 2.293), control1: CGPoint(x: 3.724, y: 2), control2: CGPoint(x: 3.488, y: 2.098)) p.addCurve(to: CGPoint(x: 3, y: 3), control1: CGPoint(x: 3.098, y: 2.488), control2: CGPoint(x: 3, y: 2.724)) p.addLine(to: CGPoint(x: 3, y: 5)) p.addLine(to: CGPoint(x: 4, y: 5)) p.closeSubpath() p.move(to: CGPoint(x: 3, y: 6)) p.addLine(to: CGPoint(x: 3, y: 7.5)) p.addCurve(to: CGPoint(x: 2.675, y: 10.3), control1: CGPoint(x: 3, y: 8.427), control2: CGPoint(x: 2.892, y: 9.36)) p.addCurve(to: CGPoint(x: 2.345, y: 11.514), control1: CGPoint(x: 2.589, y: 10.672), control2: CGPoint(x: 2.479, y: 11.077)) p.addCurve(to: CGPoint(x: 2.191, y: 12), control1: CGPoint(x: 2.305, y: 11.644), control2: CGPoint(x: 2.254, y: 11.807)) p.addLine(to: CGPoint(x: 13.998, y: 12)) p.addLine(to: CGPoint(x: 13.998, y: 11.998)) p.addCurve(to: CGPoint(x: 13.985, y: 11.494), control1: CGPoint(x: 13.995, y: 11.782), control2: CGPoint(x: 13.991, y: 11.614)) p.addCurve(to: CGPoint(x: 13.89, y: 10.746), control1: CGPoint(x: 13.97, y: 11.188), control2: CGPoint(x: 13.938, y: 10.939)) p.addCurve(to: CGPoint(x: 13.678, y: 10.269), control1: CGPoint(x: 13.841, y: 10.551), control2: CGPoint(x: 13.771, y: 10.392)) p.addCurve(to: CGPoint(x: 13.362, y: 9.993), control1: CGPoint(x: 13.598, y: 10.162), control2: CGPoint(x: 13.493, y: 10.07)) p.addCurve(to: CGPoint(x: 12.828, y: 9.888), control1: CGPoint(x: 13.21, y: 9.98), control2: CGPoint(x: 13.032, y: 9.945)) p.addCurve(to: CGPoint(x: 11.984, y: 9.582), control1: CGPoint(x: 12.557, y: 9.813), control2: CGPoint(x: 12.276, y: 9.711)) p.addCurve(to: CGPoint(x: 10.146, y: 8.354), control1: CGPoint(x: 11.253, y: 9.257), control2: CGPoint(x: 10.64, y: 8.847)) p.addCurve(to: CGPoint(x: 8.641, y: 6), control1: CGPoint(x: 9.486, y: 7.693), control2: CGPoint(x: 8.984, y: 6.909)) p.addLine(to: CGPoint(x: 7, y: 6)) p.addLine(to: CGPoint(x: 7, y: 7)) p.addLine(to: CGPoint(x: 4, y: 7)) p.addLine(to: CGPoint(x: 4, y: 6)) p.addLine(to: CGPoint(x: 3, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 2.146, y: 13.854)) p.addCurve(to: CGPoint(x: 2.5, y: 14), control1: CGPoint(x: 2.244, y: 13.951), control2: CGPoint(x: 2.362, y: 14)) p.addLine(to: CGPoint(x: 13.5, y: 14)) p.addCurve(to: CGPoint(x: 13.854, y: 13.854), control1: CGPoint(x: 13.638, y: 14), control2: CGPoint(x: 13.756, y: 13.951)) p.addCurve(to: CGPoint(x: 14, y: 13.5), control1: CGPoint(x: 13.951, y: 13.756), control2: CGPoint(x: 14, y: 13.638)) p.addLine(to: CGPoint(x: 14, y: 13)) p.addLine(to: CGPoint(x: 2, y: 13)) p.addLine(to: CGPoint(x: 2, y: 13.5)) p.addCurve(to: CGPoint(x: 2.146, y: 13.854), control1: CGPoint(x: 2, y: 13.638), control2: CGPoint(x: 2.049, y: 13.756)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BootBuckleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "boot-buckle" (line-round), MIT. https://gentleface.com/icons/boot-buckle 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 BootBuckleIcon: ImageVector by lazy { ImageVector.Builder( name = "boot-buckle", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.561 14.561C14.414 14.707 14.245 14.818 14.052 14.895C13.875 14.965 13.691 15 13.5 15L2.5 15C2.309 15 2.125 14.965 1.948 14.895C1.755 14.818 1.586 14.707 1.439 14.561C1.293 14.414 1.182 14.245 1.105 14.052C1.035 13.875 1 13.691 1 13.5L1 12.5C1 12.446 1.009 12.393 1.026 12.342C1.191 11.846 1.312 11.472 1.389 11.221C1.516 10.807 1.62 10.425 1.7 10.075C1.9 9.209 2 8.351 2 7.5L2 3C2 2.746 2.047 2.5 2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5C9 3.002 9.139 4.226 9.417 5.171C9.706 6.152 10.184 6.977 10.854 7.646C11.26 8.053 11.772 8.393 12.391 8.668C12.636 8.777 12.871 8.863 13.094 8.924C13.277 8.975 13.412 9 13.5 9C13.579 9 13.653 9.018 13.724 9.053C14.313 9.348 14.692 9.831 14.86 10.504C14.924 10.759 14.965 11.073 14.984 11.444C14.995 11.66 15 12.013 15 12.5L15 13.5C15 13.691 14.965 13.875 14.895 14.052C14.818 14.245 14.707 14.414 14.561 14.561ZM4 5L4 4L4.499 4L4.5 4L7 4L7 5L8.338 5C8.141 4.159 8.03 3.159 8.005 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 5L4 5ZM3 6L3 7.5C3 8.427 2.892 9.36 2.675 10.3C2.589 10.672 2.479 11.077 2.345 11.514C2.305 11.644 2.254 11.807 2.191 12L13.998 12L13.998 11.998C13.995 11.782 13.991 11.614 13.985 11.494C13.97 11.188 13.938 10.939 13.89 10.746C13.841 10.551 13.771 10.392 13.678 10.269C13.598 10.162 13.493 10.07 13.362 9.993C13.21 9.98 13.032 9.945 12.828 9.888C12.557 9.813 12.276 9.711 11.984 9.582C11.253 9.257 10.64 8.847 10.146 8.354C9.486 7.693 8.984 6.909 8.641 6L7 6L7 7L4 7L4 6L3 6ZM2.146 13.854C2.244 13.951 2.362 14 2.5 14L13.5 14C13.638 14 13.756 13.951 13.854 13.854C13.951 13.756 14 13.638 14 13.5L14 13L2 13L2 13.5C2 13.638 2.049 13.756 2.146 13.854Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BootBuckleIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "boot-buckle" (line-round), MIT. https://gentleface.com/icons/boot-buckle import 'package:flutter/widgets.dart'; class BootBuckleIcon extends StatelessWidget { const BootBuckleIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BootBuckleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BootBuckleIconPainter extends CustomPainter { _BootBuckleIconPainter(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.561, 14.561) ..cubicTo(14.414, 14.707, 14.245, 14.818, 14.052, 14.895) ..cubicTo(13.875, 14.965, 13.691, 15, 13.5, 15) ..lineTo(2.5, 15) ..cubicTo(2.309, 15, 2.125, 14.965, 1.948, 14.895) ..cubicTo(1.755, 14.818, 1.586, 14.707, 1.439, 14.561) ..cubicTo(1.293, 14.414, 1.182, 14.245, 1.105, 14.052) ..cubicTo(1.035, 13.875, 1, 13.691, 1, 13.5) ..lineTo(1, 12.5) ..cubicTo(1, 12.446, 1.009, 12.393, 1.026, 12.342) ..cubicTo(1.191, 11.846, 1.312, 11.472, 1.389, 11.221) ..cubicTo(1.516, 10.807, 1.62, 10.425, 1.7, 10.075) ..cubicTo(1.9, 9.209, 2, 8.351, 2, 7.5) ..lineTo(2, 3) ..cubicTo(2, 2.746, 2.047, 2.5, 2.14, 2.264) ..cubicTo(2.242, 2.007, 2.391, 1.781, 2.586, 1.586) ..cubicTo(2.781, 1.391, 3.007, 1.242, 3.264, 1.14) ..cubicTo(3.5, 1.047, 3.746, 1, 4, 1) ..lineTo(8.5, 1) ..cubicTo(8.641, 1, 8.759, 1.048, 8.856, 1.144) ..cubicTo(8.952, 1.241, 9, 1.359, 9, 1.5) ..cubicTo(9, 3.002, 9.139, 4.226, 9.417, 5.171) ..cubicTo(9.706, 6.152, 10.184, 6.977, 10.854, 7.646) ..cubicTo(11.26, 8.053, 11.772, 8.393, 12.391, 8.668) ..cubicTo(12.636, 8.777, 12.871, 8.863, 13.094, 8.924) ..cubicTo(13.277, 8.975, 13.412, 9, 13.5, 9) ..cubicTo(13.579, 9, 13.653, 9.018, 13.724, 9.053) ..cubicTo(14.313, 9.348, 14.692, 9.831, 14.86, 10.504) ..cubicTo(14.924, 10.759, 14.965, 11.073, 14.984, 11.444) ..cubicTo(14.995, 11.66, 15, 12.013, 15, 12.5) ..lineTo(15, 13.5) ..cubicTo(15, 13.691, 14.965, 13.875, 14.895, 14.052) ..cubicTo(14.818, 14.245, 14.707, 14.414, 14.561, 14.561) ..close() ..moveTo(4, 5) ..lineTo(4, 4) ..lineTo(4.499, 4) ..lineTo(4.5, 4) ..lineTo(7, 4) ..lineTo(7, 5) ..lineTo(8.338, 5) ..cubicTo(8.141, 4.159, 8.03, 3.159, 8.005, 2) ..lineTo(4, 2) ..cubicTo(3.724, 2, 3.488, 2.098, 3.293, 2.293) ..cubicTo(3.098, 2.488, 3, 2.724, 3, 3) ..lineTo(3, 5) ..lineTo(4, 5) ..close() ..moveTo(3, 6) ..lineTo(3, 7.5) ..cubicTo(3, 8.427, 2.892, 9.36, 2.675, 10.3) ..cubicTo(2.589, 10.672, 2.479, 11.077, 2.345, 11.514) ..cubicTo(2.305, 11.644, 2.254, 11.807, 2.191, 12) ..lineTo(13.998, 12) ..lineTo(13.998, 11.998) ..cubicTo(13.995, 11.782, 13.991, 11.614, 13.985, 11.494) ..cubicTo(13.97, 11.188, 13.938, 10.939, 13.89, 10.746) ..cubicTo(13.841, 10.551, 13.771, 10.392, 13.678, 10.269) ..cubicTo(13.598, 10.162, 13.493, 10.07, 13.362, 9.993) ..cubicTo(13.21, 9.98, 13.032, 9.945, 12.828, 9.888) ..cubicTo(12.557, 9.813, 12.276, 9.711, 11.984, 9.582) ..cubicTo(11.253, 9.257, 10.64, 8.847, 10.146, 8.354) ..cubicTo(9.486, 7.693, 8.984, 6.909, 8.641, 6) ..lineTo(7, 6) ..lineTo(7, 7) ..lineTo(4, 7) ..lineTo(4, 6) ..lineTo(3, 6) ..close() ..moveTo(2.146, 13.854) ..cubicTo(2.244, 13.951, 2.362, 14, 2.5, 14) ..lineTo(13.5, 14) ..cubicTo(13.638, 14, 13.756, 13.951, 13.854, 13.854) ..cubicTo(13.951, 13.756, 14, 13.638, 14, 13.5) ..lineTo(14, 13) ..lineTo(2, 13) ..lineTo(2, 13.5) ..cubicTo(2, 13.638, 2.049, 13.756, 2.146, 13.854) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BootBuckleIconPainter old) => old.color != color; } ```