Proper Roof Outline icon

healthicons:proper-roof-outline

The Proper Roof Outline icon (healthicons:proper-roof-outline) is a free SVG icon from the Health Icons set by Resolve to Save Lives. It is drawn on a 48 × 48 grid. Health Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Health Icons
Author: Resolve to Save Lives
License: MIT
Size: 48 × 48
Category: Places
Tags: properroof, roofoutline, properroofoutline, proper roof2x outline

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="currentColor" fill-rule="evenodd" d="M24.707 6.293a1 1 0 0 0-1.414 0l-16 16A1 1 0 0 0 7 23c0 1.214.658 2.236 1.572 2.921a5.4 5.4 0 0 0 1.928.898v12.747c0 .732.543 1.15.857 1.334c.354.21.795.355 1.226.464c.878.223 2.007.362 3.083.453a61 61 0 0 0 4.233.182l.074.001H21v-6.737c0-1.363 1.151-2.763 3-2.763s3 1.4 3 2.763V42h1.101l.276-.003a61 61 0 0 0 3.957-.18c1.076-.09 2.205-.23 3.083-.453c.431-.109.872-.254 1.226-.464c.314-.185.857-.602.857-1.334V26.819a5.4 5.4 0 0 0 1.928-.898C40.342 25.236 41 24.214 41 23a1 1 0 0 0-.293-.707zM28 41v1zm-8 0v1zm15.5-14.013c-1.035-.056-2.03-.289-2.828-.75A4 4 0 0 1 32 25.75c-.203.185-.43.349-.672.488c-.926.535-2.117.763-3.328.763s-2.402-.228-3.328-.763A4 4 0 0 1 24 25.75c-.203.185-.43.349-.672.488c-.926.535-2.117.763-3.328.763s-2.402-.228-3.328-.763A4 4 0 0 1 16 25.75c-.203.185-.43.349-.672.488c-.798.461-1.793.694-2.828.75V39.24c.127.055.315.119.573.184c.716.181 1.712.31 2.761.4a53 53 0 0 0 3.166.16v-4.722c0-2.462 2.04-4.763 5-4.763s5 2.301 5 4.763v4.723l.3-.008a53 53 0 0 0 2.866-.154c1.049-.088 2.045-.218 2.76-.398a4 4 0 0 0 .574-.185zm-17.828-2.482c-.487-.28-.672-.61-.672-1.005a1 1 0 1 0-2 0c0 .395-.185.724-.671 1.005c-.522.301-1.331.495-2.329.495c-.91 0-1.694-.278-2.228-.679c-.391-.293-.623-.627-.72-.96l2.9-2.899c.704.35 1.554.538 2.436.538c1.042 0 2.033-.262 2.795-.738q.212-.131.41-.295q.196.164.408.296c.762.475 1.753.737 2.795.737s2.033-.262 2.795-.738q.211-.131.41-.295q.196.164.408.296c.762.475 1.753.737 2.795.737s2.033-.262 2.795-.738q.211-.131.409-.295q.196.164.409.296c.762.475 1.753.737 2.795.737c.882 0 1.732-.188 2.436-.538l2.9 2.9c-.097.332-.328.666-.72.96c-.534.4-1.319.678-2.228.678c-.998 0-1.807-.194-2.328-.495c-.487-.28-.672-.61-.672-1.005a1 1 0 1 0-2 0c0 .395-.185.724-.672 1.005c-.521.301-1.33.495-2.328.495s-1.807-.194-2.328-.495c-.487-.28-.672-.61-.672-1.005a1 1 0 1 0-2 0c0 .395-.185.724-.672 1.005c-.521.301-1.33.495-2.328.495s-1.807-.194-2.328-.495m.745-10.508l-4.907 4.907c.265.06.56.096.878.096c.728 0 1.339-.186 1.736-.434c.412-.257.468-.483.468-.566a1 1 0 1 1 2 0c0 .082.057.309.468.566c.397.248 1.009.434 1.736.434s1.339-.186 1.736-.434c.412-.257.468-.483.468-.566a1 1 0 1 1 2 0c0 .082.056.309.468.566c.397.248 1.009.434 1.736.434s1.339-.186 1.736-.434c.412-.257.468-.483.468-.566a1 1 0 1 1 2 0c0 .082.056.309.468.566c.397.248 1.008.434 1.736.434c.318 0 .613-.035.878-.096l-4.907-4.907c-.67.94-1.84 1.503-3.083 1.503c-.935 0-1.829-.319-2.5-.877c-.67.558-1.565.877-2.5.877c-1.242 0-2.412-.562-3.083-1.503m1.466-1.466q.022.04.04.085c.185.444.76.884 1.577.884c.816 0 1.392-.44 1.577-.884a1 1 0 0 1 1.846 0c.185.444.76.884 1.577.884c.816 0 1.392-.44 1.577-.884a1 1 0 0 1 .04-.085L24 8.414zm15.788 26.617l-.013.01zm-23.342 0l.013.01z" clip-rule="evenodd"/></svg>

How to use the Proper Roof Outline icon

React

import { Icon } from "@iconify/react";

<Icon icon="healthicons:proper-roof-outline" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="healthicons:proper-roof-outline" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="healthicons:proper-roof-outline" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[healthicons--proper-roof-outline]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/healthicons -->
<div class="i-healthicons:proper-roof-outline"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="healthicons:proper-roof-outline"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/healthicons/proper-roof-outline.svg" alt="Proper Roof Outline icon" width="24" height="24">

Related icons in Health Icons

Proper Roof Outline icon FAQ

Is the Proper Roof Outline icon free for commercial use?

Yes. Health Icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Proper Roof Outline icon in React?

Install @iconify/react and render <Icon icon="healthicons:proper-roof-outline" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Proper Roof Outline icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/healthicons/proper-roof-outline.svg" alt="Proper Roof Outline icon">, or paste the SVG code inline to style it with CSS.

Browse all Health Icons →