gentleface

Gentleface › Design › set-square

set-square icon

Set square: square feet, floor area, area measurement, set square. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14 13.5C14 13.641 13.952 13.759 13.856 13.856C13.759 13.952 13.641 14 13.5 14L4 14C3.746 14 3.5 13.953 3.264 13.86C3.007 13.758 2.781 13.609 2.586 13.414C2.391 13.219 2.242 12.993 2.14 12.736C2.047 12.5 2 12.254 2 12L2 2.5C2 2.362 2.049 2.244 2.146 2.146C2.244 2.049 2.362 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L13.854 13.146C13.951 13.244 14 13.362 14 13.5ZM4.144 11.144C4.241 11.048 4.359 11 4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5L5 13L6 13L6 10.5C6 10.359 6.048 10.241 6.144 10.144C6.241 10.048 6.359 10 6.5 10C6.641 10 6.759 10.048 6.856 10.144C6.952 10.241 7 10.359 7 10.5L7 13L8 13L8 11.5C8 11.359 8.048 11.241 8.144 11.144C8.241 11.048 8.359 11 8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 13L12.293 13L3 3.707L3 12C3 12.276 3.098 12.512 3.293 12.707C3.488 12.902 3.724 13 4 13L4 11.5C4 11.359 4.048 11.241 4.144 11.144Z"/></svg>
React
// Gentleface "set-square" (line-round), MIT. https://gentleface.com/icons/set-square
import type { SVGProps } from 'react';

export function SetSquareIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14 13.5C14 13.641 13.952 13.759 13.856 13.856C13.759 13.952 13.641 14 13.5 14L4 14C3.746 14 3.5 13.953 3.264 13.86C3.007 13.758 2.781 13.609 2.586 13.414C2.391 13.219 2.242 12.993 2.14 12.736C2.047 12.5 2 12.254 2 12L2 2.5C2 2.362 2.049 2.244 2.146 2.146C2.244 2.049 2.362 2 2.5 2C2.638 2 2.756 2.049 2.854 2.146L13.854 13.146C13.951 13.244 14 13.362 14 13.5ZM4.144 11.144C4.241 11.048 4.359 11 4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5L5 13L6 13L6 10.5C6 10.359 6.048 10.241 6.144 10.144C6.241 10.048 6.359 10 6.5 10C6.641 10 6.759 10.048 6.856 10.144C6.952 10.241 7 10.359 7 10.5L7 13L8 13L8 11.5C8 11.359 8.048 11.241 8.144 11.144C8.241 11.048 8.359 11 8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 13L12.293 13L3 3.707L3 12C3 12.276 3.098 12.512 3.293 12.707C3.488 12.902 3.724 13 4 13L4 11.5C4 11.359 4.048 11.241 4.144 11.144Z" />
    </svg>
  );
}
Vue
Vue: see /icons/set-square.md
Svelte
Svelte: see /icons/set-square.md
HTML img
HTML img: see /icons/set-square.md
CSS
CSS: see /icons/set-square.md
Data URL
Data URL: see /icons/set-square.md
Sprite
Sprite: see /icons/set-square.md
SwiftUI
SwiftUI: see /icons/set-square.md
Compose
Compose: see /icons/set-square.md
Android XML
Android XML: see /icons/set-square.md
Flutter
Flutter: see /icons/set-square.md

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. 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. More in how to use.

With npm: import { SetSquareIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
square feet, floor area, area measurement, set square
Tags
set square, triangle ruler, drafting triangle, square feet, square foot, sq ft, floor area, area, measurement, measure, real estate, drafting, geometry, technical drawing
Category
Design
Component name
SetSquareIcon
History
  • released in 0.2.0
  • added
Since
version 0.2.0

More design icons

For agents

Metadata: /icons/set-square.json · Markdown: /icons/set-square.md · SVG: https://gentleface.com/svg/{style}/16/set-square.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/set-square.png