# blueprint icon Blueprint. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/blueprint - Category: Design - Use it for: blueprint, floor plan, floorplan, technical drawing - Tags: blueprint, floor plan, floorplan, plan, architecture, architect, technical drawing, drafting, building plan, layout, rooms, construction - Component name: BlueprintIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { BlueprintIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## 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/blueprint.svg · PNG https://gentleface.com/png/line-round/16/blueprint.png · https://gentleface.com/png/line-round/32/blueprint.png · https://gentleface.com/png/line-round/48/blueprint.png - line-soft: https://gentleface.com/svg/line-soft/16/blueprint.svg · PNG https://gentleface.com/png/line-soft/16/blueprint.png · https://gentleface.com/png/line-soft/32/blueprint.png · https://gentleface.com/png/line-soft/48/blueprint.png - line-sharp: https://gentleface.com/svg/line-sharp/16/blueprint.svg · PNG https://gentleface.com/png/line-sharp/16/blueprint.png · https://gentleface.com/png/line-sharp/32/blueprint.png · https://gentleface.com/png/line-sharp/48/blueprint.png - solid-round: https://gentleface.com/svg/solid-round/16/blueprint.svg · PNG https://gentleface.com/png/solid-round/16/blueprint.png · https://gentleface.com/png/solid-round/32/blueprint.png · https://gentleface.com/png/solid-round/48/blueprint.png - solid-soft: https://gentleface.com/svg/solid-soft/16/blueprint.svg · PNG https://gentleface.com/png/solid-soft/16/blueprint.png · https://gentleface.com/png/solid-soft/32/blueprint.png · https://gentleface.com/png/solid-soft/48/blueprint.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/blueprint.svg · PNG https://gentleface.com/png/solid-sharp/16/blueprint.png · https://gentleface.com/png/solid-sharp/32/blueprint.png · https://gentleface.com/png/solid-sharp/48/blueprint.png The SVG of every style: https://gentleface.com/icons/blueprint.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 "blueprint" (line-round), MIT. https://gentleface.com/icons/blueprint import type { SVGProps } from 'react'; export function BlueprintIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "blueprint" (line-round), MIT. https://gentleface.com/icons/blueprint. Takes the text color. */ .icon-blueprint { 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.707 3.293C14.902 3.488 15 3.724 15 4L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L5 13C5 13.254 4.953 13.5 4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1C3.254 1 3.5 1.047 3.736 1.14C3.993 1.242 4.219 1.391 4.414 1.586C4.609 1.781 4.758 2.007 4.86 2.264C4.953 2.5 5 2.746 5 3L14 3C14.276 3 14.512 3.098 14.707 3.293ZM4.04 12.5C4.014 12.441 4 12.378 4 12.313L4 3.687C4 3.622 4.014 3.559 4.04 3.5C4.013 3.422 4 3.339 4 3.25L4 3C4 2.724 3.902 2.488 3.707 2.293C3.512 2.098 3.276 2 3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 12.75C4 12.661 4.013 12.578 4.04 12.5ZM7.246 7.212C7.424 6.762 7.683 6.367 8.025 6.025C8.367 5.683 8.762 5.424 9.212 5.246C9.625 5.082 10.055 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 7C11 7.276 11.098 7.512 11.293 7.707C11.488 7.902 11.724 8 12 8L14 8L14 4L5 4L5 8L7.035 8C7.074 7.731 7.144 7.468 7.246 7.212ZM9.58 6.176C9.259 6.303 8.976 6.488 8.732 6.732C8.488 6.976 8.303 7.259 8.176 7.58C8.059 7.875 8 8.182 8 8.5C8 8.641 7.952 8.759 7.856 8.856C7.759 8.952 7.641 9 7.5 9L5 9L5 12L12 12L12 9C11.746 9 11.5 8.953 11.264 8.86C11.007 8.758 10.781 8.609 10.586 8.414C10.391 8.219 10.242 7.993 10.14 7.736C10.047 7.5 10 7.254 10 7L10 6.05C9.858 6.079 9.717 6.121 9.58 6.176ZM14 12L14 9L13 9L13 12L14 12Z'/%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.707 3.293C14.902 3.488 15 3.724 15 4L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L5 13C5 13.254 4.953 13.5 4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1C3.254 1 3.5 1.047 3.736 1.14C3.993 1.242 4.219 1.391 4.414 1.586C4.609 1.781 4.758 2.007 4.86 2.264C4.953 2.5 5 2.746 5 3L14 3C14.276 3 14.512 3.098 14.707 3.293ZM4.04 12.5C4.014 12.441 4 12.378 4 12.313L4 3.687C4 3.622 4.014 3.559 4.04 3.5C4.013 3.422 4 3.339 4 3.25L4 3C4 2.724 3.902 2.488 3.707 2.293C3.512 2.098 3.276 2 3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 12.75C4 12.661 4.013 12.578 4.04 12.5ZM7.246 7.212C7.424 6.762 7.683 6.367 8.025 6.025C8.367 5.683 8.762 5.424 9.212 5.246C9.625 5.082 10.055 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 7C11 7.276 11.098 7.512 11.293 7.707C11.488 7.902 11.724 8 12 8L14 8L14 4L5 4L5 8L7.035 8C7.074 7.731 7.144 7.468 7.246 7.212ZM9.58 6.176C9.259 6.303 8.976 6.488 8.732 6.732C8.488 6.976 8.303 7.259 8.176 7.58C8.059 7.875 8 8.182 8 8.5C8 8.641 7.952 8.759 7.856 8.856C7.759 8.952 7.641 9 7.5 9L5 9L5 12L12 12L12 9C11.746 9 11.5 8.953 11.264 8.86C11.007 8.758 10.781 8.609 10.586 8.414C10.391 8.219 10.242 7.993 10.14 7.736C10.047 7.5 10 7.254 10 7L10 6.05C9.858 6.079 9.717 6.121 9.58 6.176ZM14 12L14 9L13 9L13 12L14 12Z'/%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.707 3.293C14.902 3.488 15 3.724 15 4L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L5 13C5 13.254 4.953 13.5 4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1C3.254 1 3.5 1.047 3.736 1.14C3.993 1.242 4.219 1.391 4.414 1.586C4.609 1.781 4.758 2.007 4.86 2.264C4.953 2.5 5 2.746 5 3L14 3C14.276 3 14.512 3.098 14.707 3.293ZM4.04 12.5C4.014 12.441 4 12.378 4 12.313L4 3.687C4 3.622 4.014 3.559 4.04 3.5C4.013 3.422 4 3.339 4 3.25L4 3C4 2.724 3.902 2.488 3.707 2.293C3.512 2.098 3.276 2 3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 12.75C4 12.661 4.013 12.578 4.04 12.5ZM7.246 7.212C7.424 6.762 7.683 6.367 8.025 6.025C8.367 5.683 8.762 5.424 9.212 5.246C9.625 5.082 10.055 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 7C11 7.276 11.098 7.512 11.293 7.707C11.488 7.902 11.724 8 12 8L14 8L14 4L5 4L5 8L7.035 8C7.074 7.731 7.144 7.468 7.246 7.212ZM9.58 6.176C9.259 6.303 8.976 6.488 8.732 6.732C8.488 6.976 8.303 7.259 8.176 7.58C8.059 7.875 8 8.182 8 8.5C8 8.641 7.952 8.759 7.856 8.856C7.759 8.952 7.641 9 7.5 9L5 9L5 12L12 12L12 9C11.746 9 11.5 8.953 11.264 8.86C11.007 8.758 10.781 8.609 10.586 8.414C10.391 8.219 10.242 7.993 10.14 7.736C10.047 7.5 10 7.254 10 7L10 6.05C9.858 6.079 9.717 6.121 9.58 6.176ZM14 12L14 9L13 9L13 12L14 12Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "blueprint" (line-round), MIT. https://gentleface.com/icons/blueprint import SwiftUI struct BlueprintIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.707, y: 3.293)) p.addCurve(to: CGPoint(x: 15, y: 4), control1: CGPoint(x: 14.902, y: 3.488), control2: CGPoint(x: 15, y: 3.724)) p.addLine(to: CGPoint(x: 15, y: 12)) p.addCurve(to: CGPoint(x: 14.707, y: 12.707), control1: CGPoint(x: 15, y: 12.276), control2: CGPoint(x: 14.902, y: 12.512)) p.addCurve(to: CGPoint(x: 14, y: 13), control1: CGPoint(x: 14.512, y: 12.902), control2: CGPoint(x: 14.276, y: 13)) p.addLine(to: CGPoint(x: 5, y: 13)) p.addCurve(to: CGPoint(x: 4.86, y: 13.736), control1: CGPoint(x: 5, y: 13.254), control2: CGPoint(x: 4.953, y: 13.5)) p.addCurve(to: CGPoint(x: 4.414, y: 14.414), control1: CGPoint(x: 4.758, y: 13.993), control2: CGPoint(x: 4.609, y: 14.219)) p.addCurve(to: CGPoint(x: 3.736, y: 14.86), control1: CGPoint(x: 4.219, y: 14.609), control2: CGPoint(x: 3.993, y: 14.758)) p.addCurve(to: CGPoint(x: 3, y: 15), control1: CGPoint(x: 3.5, y: 14.953), control2: CGPoint(x: 3.254, y: 15)) p.addCurve(to: CGPoint(x: 2.264, y: 14.86), control1: CGPoint(x: 2.746, y: 15), control2: CGPoint(x: 2.5, y: 14.953)) p.addCurve(to: CGPoint(x: 1.586, y: 14.414), control1: CGPoint(x: 2.007, y: 14.758), control2: CGPoint(x: 1.781, y: 14.609)) p.addCurve(to: CGPoint(x: 1.14, y: 13.736), control1: CGPoint(x: 1.391, y: 14.219), control2: CGPoint(x: 1.242, y: 13.993)) p.addCurve(to: CGPoint(x: 1, y: 13), control1: CGPoint(x: 1.047, y: 13.5), control2: CGPoint(x: 1, y: 13.254)) p.addLine(to: CGPoint(x: 1, y: 3)) p.addCurve(to: CGPoint(x: 1.14, y: 2.264), control1: CGPoint(x: 1, y: 2.746), control2: CGPoint(x: 1.047, y: 2.5)) p.addCurve(to: CGPoint(x: 1.586, y: 1.586), control1: CGPoint(x: 1.242, y: 2.007), control2: CGPoint(x: 1.391, y: 1.781)) p.addCurve(to: CGPoint(x: 2.264, y: 1.14), control1: CGPoint(x: 1.781, y: 1.391), control2: CGPoint(x: 2.007, y: 1.242)) p.addCurve(to: CGPoint(x: 3, y: 1), control1: CGPoint(x: 2.5, y: 1.047), control2: CGPoint(x: 2.746, y: 1)) p.addCurve(to: CGPoint(x: 3.736, y: 1.14), control1: CGPoint(x: 3.254, y: 1), control2: CGPoint(x: 3.5, y: 1.047)) p.addCurve(to: CGPoint(x: 4.414, y: 1.586), control1: CGPoint(x: 3.993, y: 1.242), control2: CGPoint(x: 4.219, y: 1.391)) p.addCurve(to: CGPoint(x: 4.86, y: 2.264), control1: CGPoint(x: 4.609, y: 1.781), control2: CGPoint(x: 4.758, y: 2.007)) p.addCurve(to: CGPoint(x: 5, y: 3), control1: CGPoint(x: 4.953, y: 2.5), control2: CGPoint(x: 5, y: 2.746)) p.addLine(to: CGPoint(x: 14, y: 3)) p.addCurve(to: CGPoint(x: 14.707, y: 3.293), control1: CGPoint(x: 14.276, y: 3), control2: CGPoint(x: 14.512, y: 3.098)) p.closeSubpath() p.move(to: CGPoint(x: 4.04, y: 12.5)) p.addCurve(to: CGPoint(x: 4, y: 12.313), control1: CGPoint(x: 4.014, y: 12.441), control2: CGPoint(x: 4, y: 12.378)) p.addLine(to: CGPoint(x: 4, y: 3.687)) p.addCurve(to: CGPoint(x: 4.04, y: 3.5), control1: CGPoint(x: 4, y: 3.622), control2: CGPoint(x: 4.014, y: 3.559)) p.addCurve(to: CGPoint(x: 4, y: 3.25), control1: CGPoint(x: 4.013, y: 3.422), control2: CGPoint(x: 4, y: 3.339)) p.addLine(to: CGPoint(x: 4, y: 3)) p.addCurve(to: CGPoint(x: 3.707, y: 2.293), control1: CGPoint(x: 4, y: 2.724), control2: CGPoint(x: 3.902, y: 2.488)) p.addCurve(to: CGPoint(x: 3, y: 2), control1: CGPoint(x: 3.512, y: 2.098), control2: CGPoint(x: 3.276, y: 2)) p.addCurve(to: CGPoint(x: 2.293, y: 2.293), control1: CGPoint(x: 2.724, y: 2), control2: CGPoint(x: 2.488, y: 2.098)) p.addCurve(to: CGPoint(x: 2, y: 3), control1: CGPoint(x: 2.098, y: 2.488), control2: CGPoint(x: 2, y: 2.724)) p.addLine(to: CGPoint(x: 2, y: 13)) p.addCurve(to: CGPoint(x: 2.293, y: 13.707), control1: CGPoint(x: 2, y: 13.276), control2: CGPoint(x: 2.098, y: 13.512)) p.addCurve(to: CGPoint(x: 3, y: 14), control1: CGPoint(x: 2.488, y: 13.902), control2: CGPoint(x: 2.724, y: 14)) p.addCurve(to: CGPoint(x: 3.707, y: 13.707), control1: CGPoint(x: 3.276, y: 14), control2: CGPoint(x: 3.512, y: 13.902)) p.addCurve(to: CGPoint(x: 4, y: 13), control1: CGPoint(x: 3.902, y: 13.512), control2: CGPoint(x: 4, y: 13.276)) p.addLine(to: CGPoint(x: 4, y: 12.75)) p.addCurve(to: CGPoint(x: 4.04, y: 12.5), control1: CGPoint(x: 4, y: 12.661), control2: CGPoint(x: 4.013, y: 12.578)) p.closeSubpath() p.move(to: CGPoint(x: 7.246, y: 7.212)) p.addCurve(to: CGPoint(x: 8.025, y: 6.025), control1: CGPoint(x: 7.424, y: 6.762), control2: CGPoint(x: 7.683, y: 6.367)) p.addCurve(to: CGPoint(x: 9.212, y: 5.246), control1: CGPoint(x: 8.367, y: 5.683), control2: CGPoint(x: 8.762, y: 5.424)) p.addCurve(to: CGPoint(x: 10.5, y: 5), control1: CGPoint(x: 9.625, y: 5.082), control2: CGPoint(x: 10.055, y: 5)) p.addCurve(to: CGPoint(x: 10.856, y: 5.144), control1: CGPoint(x: 10.641, y: 5), control2: CGPoint(x: 10.759, y: 5.048)) p.addCurve(to: CGPoint(x: 11, y: 5.5), control1: CGPoint(x: 10.952, y: 5.241), control2: CGPoint(x: 11, y: 5.359)) p.addLine(to: CGPoint(x: 11, y: 7)) p.addCurve(to: CGPoint(x: 11.293, y: 7.707), control1: CGPoint(x: 11, y: 7.276), control2: CGPoint(x: 11.098, y: 7.512)) p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 11.488, y: 7.902), control2: CGPoint(x: 11.724, y: 8)) p.addLine(to: CGPoint(x: 14, y: 8)) p.addLine(to: CGPoint(x: 14, y: 4)) p.addLine(to: CGPoint(x: 5, y: 4)) p.addLine(to: CGPoint(x: 5, y: 8)) p.addLine(to: CGPoint(x: 7.035, y: 8)) p.addCurve(to: CGPoint(x: 7.246, y: 7.212), control1: CGPoint(x: 7.074, y: 7.731), control2: CGPoint(x: 7.144, y: 7.468)) p.closeSubpath() p.move(to: CGPoint(x: 9.58, y: 6.176)) p.addCurve(to: CGPoint(x: 8.732, y: 6.732), control1: CGPoint(x: 9.259, y: 6.303), control2: CGPoint(x: 8.976, y: 6.488)) p.addCurve(to: CGPoint(x: 8.176, y: 7.58), control1: CGPoint(x: 8.488, y: 6.976), control2: CGPoint(x: 8.303, y: 7.259)) p.addCurve(to: CGPoint(x: 8, y: 8.5), control1: CGPoint(x: 8.059, y: 7.875), control2: CGPoint(x: 8, y: 8.182)) p.addCurve(to: CGPoint(x: 7.856, y: 8.856), control1: CGPoint(x: 8, y: 8.641), control2: CGPoint(x: 7.952, y: 8.759)) p.addCurve(to: CGPoint(x: 7.5, y: 9), control1: CGPoint(x: 7.759, y: 8.952), control2: CGPoint(x: 7.641, y: 9)) p.addLine(to: CGPoint(x: 5, y: 9)) p.addLine(to: CGPoint(x: 5, y: 12)) p.addLine(to: CGPoint(x: 12, y: 12)) p.addLine(to: CGPoint(x: 12, y: 9)) p.addCurve(to: CGPoint(x: 11.264, y: 8.86), control1: CGPoint(x: 11.746, y: 9), control2: CGPoint(x: 11.5, y: 8.953)) p.addCurve(to: CGPoint(x: 10.586, y: 8.414), control1: CGPoint(x: 11.007, y: 8.758), control2: CGPoint(x: 10.781, y: 8.609)) p.addCurve(to: CGPoint(x: 10.14, y: 7.736), control1: CGPoint(x: 10.391, y: 8.219), control2: CGPoint(x: 10.242, y: 7.993)) p.addCurve(to: CGPoint(x: 10, y: 7), control1: CGPoint(x: 10.047, y: 7.5), control2: CGPoint(x: 10, y: 7.254)) p.addLine(to: CGPoint(x: 10, y: 6.05)) p.addCurve(to: CGPoint(x: 9.58, y: 6.176), control1: CGPoint(x: 9.858, y: 6.079), control2: CGPoint(x: 9.717, y: 6.121)) p.closeSubpath() p.move(to: CGPoint(x: 14, y: 12)) p.addLine(to: CGPoint(x: 14, y: 9)) p.addLine(to: CGPoint(x: 13, y: 9)) p.addLine(to: CGPoint(x: 13, y: 12)) p.addLine(to: CGPoint(x: 14, y: 12)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BlueprintIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "blueprint" (line-round), MIT. https://gentleface.com/icons/blueprint 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 BlueprintIcon: ImageVector by lazy { ImageVector.Builder( name = "blueprint", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.707 3.293C14.902 3.488 15 3.724 15 4L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L5 13C5 13.254 4.953 13.5 4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1C3.254 1 3.5 1.047 3.736 1.14C3.993 1.242 4.219 1.391 4.414 1.586C4.609 1.781 4.758 2.007 4.86 2.264C4.953 2.5 5 2.746 5 3L14 3C14.276 3 14.512 3.098 14.707 3.293ZM4.04 12.5C4.014 12.441 4 12.378 4 12.313L4 3.687C4 3.622 4.014 3.559 4.04 3.5C4.013 3.422 4 3.339 4 3.25L4 3C4 2.724 3.902 2.488 3.707 2.293C3.512 2.098 3.276 2 3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 12.75C4 12.661 4.013 12.578 4.04 12.5ZM7.246 7.212C7.424 6.762 7.683 6.367 8.025 6.025C8.367 5.683 8.762 5.424 9.212 5.246C9.625 5.082 10.055 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 7C11 7.276 11.098 7.512 11.293 7.707C11.488 7.902 11.724 8 12 8L14 8L14 4L5 4L5 8L7.035 8C7.074 7.731 7.144 7.468 7.246 7.212ZM9.58 6.176C9.259 6.303 8.976 6.488 8.732 6.732C8.488 6.976 8.303 7.259 8.176 7.58C8.059 7.875 8 8.182 8 8.5C8 8.641 7.952 8.759 7.856 8.856C7.759 8.952 7.641 9 7.5 9L5 9L5 12L12 12L12 9C11.746 9 11.5 8.953 11.264 8.86C11.007 8.758 10.781 8.609 10.586 8.414C10.391 8.219 10.242 7.993 10.14 7.736C10.047 7.5 10 7.254 10 7L10 6.05C9.858 6.079 9.717 6.121 9.58 6.176ZM14 12L14 9L13 9L13 12L14 12Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BlueprintIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "blueprint" (line-round), MIT. https://gentleface.com/icons/blueprint import 'package:flutter/widgets.dart'; class BlueprintIcon extends StatelessWidget { const BlueprintIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BlueprintIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BlueprintIconPainter extends CustomPainter { _BlueprintIconPainter(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.707, 3.293) ..cubicTo(14.902, 3.488, 15, 3.724, 15, 4) ..lineTo(15, 12) ..cubicTo(15, 12.276, 14.902, 12.512, 14.707, 12.707) ..cubicTo(14.512, 12.902, 14.276, 13, 14, 13) ..lineTo(5, 13) ..cubicTo(5, 13.254, 4.953, 13.5, 4.86, 13.736) ..cubicTo(4.758, 13.993, 4.609, 14.219, 4.414, 14.414) ..cubicTo(4.219, 14.609, 3.993, 14.758, 3.736, 14.86) ..cubicTo(3.5, 14.953, 3.254, 15, 3, 15) ..cubicTo(2.746, 15, 2.5, 14.953, 2.264, 14.86) ..cubicTo(2.007, 14.758, 1.781, 14.609, 1.586, 14.414) ..cubicTo(1.391, 14.219, 1.242, 13.993, 1.14, 13.736) ..cubicTo(1.047, 13.5, 1, 13.254, 1, 13) ..lineTo(1, 3) ..cubicTo(1, 2.746, 1.047, 2.5, 1.14, 2.264) ..cubicTo(1.242, 2.007, 1.391, 1.781, 1.586, 1.586) ..cubicTo(1.781, 1.391, 2.007, 1.242, 2.264, 1.14) ..cubicTo(2.5, 1.047, 2.746, 1, 3, 1) ..cubicTo(3.254, 1, 3.5, 1.047, 3.736, 1.14) ..cubicTo(3.993, 1.242, 4.219, 1.391, 4.414, 1.586) ..cubicTo(4.609, 1.781, 4.758, 2.007, 4.86, 2.264) ..cubicTo(4.953, 2.5, 5, 2.746, 5, 3) ..lineTo(14, 3) ..cubicTo(14.276, 3, 14.512, 3.098, 14.707, 3.293) ..close() ..moveTo(4.04, 12.5) ..cubicTo(4.014, 12.441, 4, 12.378, 4, 12.313) ..lineTo(4, 3.687) ..cubicTo(4, 3.622, 4.014, 3.559, 4.04, 3.5) ..cubicTo(4.013, 3.422, 4, 3.339, 4, 3.25) ..lineTo(4, 3) ..cubicTo(4, 2.724, 3.902, 2.488, 3.707, 2.293) ..cubicTo(3.512, 2.098, 3.276, 2, 3, 2) ..cubicTo(2.724, 2, 2.488, 2.098, 2.293, 2.293) ..cubicTo(2.098, 2.488, 2, 2.724, 2, 3) ..lineTo(2, 13) ..cubicTo(2, 13.276, 2.098, 13.512, 2.293, 13.707) ..cubicTo(2.488, 13.902, 2.724, 14, 3, 14) ..cubicTo(3.276, 14, 3.512, 13.902, 3.707, 13.707) ..cubicTo(3.902, 13.512, 4, 13.276, 4, 13) ..lineTo(4, 12.75) ..cubicTo(4, 12.661, 4.013, 12.578, 4.04, 12.5) ..close() ..moveTo(7.246, 7.212) ..cubicTo(7.424, 6.762, 7.683, 6.367, 8.025, 6.025) ..cubicTo(8.367, 5.683, 8.762, 5.424, 9.212, 5.246) ..cubicTo(9.625, 5.082, 10.055, 5, 10.5, 5) ..cubicTo(10.641, 5, 10.759, 5.048, 10.856, 5.144) ..cubicTo(10.952, 5.241, 11, 5.359, 11, 5.5) ..lineTo(11, 7) ..cubicTo(11, 7.276, 11.098, 7.512, 11.293, 7.707) ..cubicTo(11.488, 7.902, 11.724, 8, 12, 8) ..lineTo(14, 8) ..lineTo(14, 4) ..lineTo(5, 4) ..lineTo(5, 8) ..lineTo(7.035, 8) ..cubicTo(7.074, 7.731, 7.144, 7.468, 7.246, 7.212) ..close() ..moveTo(9.58, 6.176) ..cubicTo(9.259, 6.303, 8.976, 6.488, 8.732, 6.732) ..cubicTo(8.488, 6.976, 8.303, 7.259, 8.176, 7.58) ..cubicTo(8.059, 7.875, 8, 8.182, 8, 8.5) ..cubicTo(8, 8.641, 7.952, 8.759, 7.856, 8.856) ..cubicTo(7.759, 8.952, 7.641, 9, 7.5, 9) ..lineTo(5, 9) ..lineTo(5, 12) ..lineTo(12, 12) ..lineTo(12, 9) ..cubicTo(11.746, 9, 11.5, 8.953, 11.264, 8.86) ..cubicTo(11.007, 8.758, 10.781, 8.609, 10.586, 8.414) ..cubicTo(10.391, 8.219, 10.242, 7.993, 10.14, 7.736) ..cubicTo(10.047, 7.5, 10, 7.254, 10, 7) ..lineTo(10, 6.05) ..cubicTo(9.858, 6.079, 9.717, 6.121, 9.58, 6.176) ..close() ..moveTo(14, 12) ..lineTo(14, 9) ..lineTo(13, 9) ..lineTo(13, 12) ..lineTo(14, 12) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BlueprintIconPainter old) => old.color != color; } ```