gentleface

Gentleface › Buildings › roof

roof icon

Roof: roof, roofing, roof repair. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M12 4L12 9.293L13.854 11.146C13.953 11.246 14.003 11.364 14.003 11.5C14.003 11.636 13.953 11.754 13.854 11.854C13.754 11.953 13.636 12.003 13.5 12.003C13.364 12.003 13.246 11.953 13.146 11.854L7.5 6.207L1.854 11.854C1.756 11.951 1.638 12 1.5 12C1.362 12 1.244 11.951 1.146 11.854C1.047 11.754 0.997 11.636 0.997 11.5C0.997 11.364 1.047 11.246 1.146 11.146L7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L10 7.293L10 4L10.499 4L10.5 4L12 4ZM9 10.5L9 12.5C9 12.641 8.952 12.759 8.856 12.856C8.759 12.952 8.641 13 8.5 13L6.5 13C6.359 13 6.241 12.952 6.144 12.856C6.048 12.759 6 12.641 6 12.5L6 10.5C6 10.359 6.048 10.241 6.144 10.144C6.241 10.048 6.359 10 6.5 10L8.5 10C8.641 10 8.759 10.048 8.856 10.144C8.952 10.241 9 10.359 9 10.5ZM7 12L8 12L8 11L7 11L7 12Z"/></svg>
React
// Gentleface "roof" (line-round), MIT. https://gentleface.com/icons/roof
import type { SVGProps } from 'react';

export function RoofIcon(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="M12 4L12 9.293L13.854 11.146C13.953 11.246 14.003 11.364 14.003 11.5C14.003 11.636 13.953 11.754 13.854 11.854C13.754 11.953 13.636 12.003 13.5 12.003C13.364 12.003 13.246 11.953 13.146 11.854L7.5 6.207L1.854 11.854C1.756 11.951 1.638 12 1.5 12C1.362 12 1.244 11.951 1.146 11.854C1.047 11.754 0.997 11.636 0.997 11.5C0.997 11.364 1.047 11.246 1.146 11.146L7.146 5.146C7.246 5.047 7.364 4.997 7.5 4.997C7.636 4.997 7.754 5.047 7.854 5.146L10 7.293L10 4L10.499 4L10.5 4L12 4ZM9 10.5L9 12.5C9 12.641 8.952 12.759 8.856 12.856C8.759 12.952 8.641 13 8.5 13L6.5 13C6.359 13 6.241 12.952 6.144 12.856C6.048 12.759 6 12.641 6 12.5L6 10.5C6 10.359 6.048 10.241 6.144 10.144C6.241 10.048 6.359 10 6.5 10L8.5 10C8.641 10 8.759 10.048 8.856 10.144C8.952 10.241 9 10.359 9 10.5ZM7 12L8 12L8 11L7 11L7 12Z" />
    </svg>
  );
}
Vue
Vue: see /icons/roof.md
Svelte
Svelte: see /icons/roof.md
HTML img
HTML img: see /icons/roof.md
CSS
CSS: see /icons/roof.md
Data URL
Data URL: see /icons/roof.md
Sprite
Sprite: see /icons/roof.md
SwiftUI
SwiftUI: see /icons/roof.md
Compose
Compose: see /icons/roof.md
Android XML
Android XML: see /icons/roof.md
Flutter
Flutter: see /icons/roof.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 { RoofIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
roof, roofing, roof repair
Tags
roof, roofing, roof-repair, roofer, chimney, rooftop, shingles, gable, attic
Category
Buildings
Component name
RoofIcon
History
  • released in 0.2.0
  • added
Since
version 0.2.0

More buildings icons

balcony building building-apartment building-gear building-pencil building-plus building-search buildings castle city cottage dam dome elevator escalator factory · all buildings icons

For agents

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