yard icon

Yard: yard, backyard, front yard. 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="M6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L12.146 5.439C12.42 5.713 12.63 6.028 12.778 6.385C12.926 6.742 13 7.114 13 7.5L13 8C13 8.276 12.902 8.512 12.707 8.707C12.512 8.902 12.276 9 12 9L3 9C2.724 9 2.488 8.902 2.293 8.707C2.098 8.512 2 8.276 2 8L2 7.5C2 7.114 2.074 6.742 2.222 6.385C2.37 6.028 2.58 5.713 2.854 5.439L6.793 1.5ZM12 7.5C12 7.246 11.951 7.002 11.854 6.767C11.757 6.533 11.619 6.326 11.439 6.146L7.5 2.207L3.561 6.146C3.381 6.326 3.243 6.533 3.146 6.767C3.049 7.002 3 7.246 3 7.5L3 8L12 8L12 7.5ZM9 7L6 7L6 5L9 5L9 7ZM1.793 10.5C1.953 10.34 2.138 10.217 2.347 10.13C2.556 10.043 2.774 10 3 10C3.226 10 3.444 10.043 3.653 10.13C3.862 10.217 4.047 10.34 4.207 10.5L4.354 10.646C4.561 10.853 4.72 11.092 4.832 11.362C4.917 11.569 4.97 11.781 4.99 12L6.01 12C6.03 11.781 6.083 11.569 6.168 11.362C6.28 11.092 6.439 10.853 6.646 10.646L6.793 10.5C6.953 10.34 7.138 10.217 7.347 10.13C7.556 10.043 7.774 10 8 10C8.226 10 8.444 10.043 8.653 10.13C8.862 10.217 9.047 10.34 9.207 10.5L9.354 10.646C9.561 10.853 9.72 11.092 9.832 11.362C9.917 11.569 9.97 11.781 9.99 12L11.01 12C11.03 11.781 11.083 11.569 11.168 11.362C11.28 11.092 11.439 10.853 11.646 10.646L11.793 10.5C11.953 10.34 12.138 10.217 12.347 10.13C12.556 10.043 12.774 10 13 10C13.226 10 13.444 10.043 13.653 10.13C13.862 10.217 14.047 10.34 14.207 10.5L14.354 10.646C14.561 10.853 14.72 11.092 14.832 11.362C14.944 11.633 15 11.914 15 12.207L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L11.5 15C11.359 15 11.241 14.952 11.144 14.856C11.048 14.759 11 14.641 11 14.5L11 13L10 13L10 14.5C10 14.641 9.952 14.759 9.856 14.856C9.759 14.952 9.641 15 9.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 13L5 13L5 14.5C5 14.641 4.952 14.759 4.856 14.856C4.759 14.952 4.641 15 4.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5L1 12.207C1 11.914 1.056 11.633 1.168 11.362C1.28 11.092 1.439 10.853 1.646 10.646L1.793 10.5ZM3.646 11.354L3.5 11.207C3.362 11.069 3.195 11 3 11C2.805 11 2.638 11.069 2.5 11.207L2.354 11.354C2.118 11.589 2 11.874 2 12.207L2 14L4 14L4 12.207C4 11.874 3.882 11.589 3.646 11.354ZM9 12.207C9 11.874 8.882 11.589 8.646 11.354L8.5 11.207C8.362 11.069 8.195 11 8 11C7.805 11 7.638 11.069 7.5 11.207L7.354 11.354C7.118 11.589 7 11.874 7 12.207L7 14L9 14L9 12.207ZM13.646 11.354L13.5 11.207C13.362 11.069 13.195 11 13 11C12.805 11 12.638 11.069 12.5 11.207L12.354 11.354C12.118 11.589 12 11.874 12 12.207L12 14L14 14L14 12.207C14 11.874 13.882 11.589 13.646 11.354Z"/></svg>

React

// Gentleface "yard" (line-round), MIT. https://gentleface.com/icons/yard
import type { SVGProps } from 'react';

export function YardIcon(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="M6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L12.146 5.439C12.42 5.713 12.63 6.028 12.778 6.385C12.926 6.742 13 7.114 13 7.5L13 8C13 8.276 12.902 8.512 12.707 8.707C12.512 8.902 12.276 9 12 9L3 9C2.724 9 2.488 8.902 2.293 8.707C2.098 8.512 2 8.276 2 8L2 7.5C2 7.114 2.074 6.742 2.222 6.385C2.37 6.028 2.58 5.713 2.854 5.439L6.793 1.5ZM12 7.5C12 7.246 11.951 7.002 11.854 6.767C11.757 6.533 11.619 6.326 11.439 6.146L7.5 2.207L3.561 6.146C3.381 6.326 3.243 6.533 3.146 6.767C3.049 7.002 3 7.246 3 7.5L3 8L12 8L12 7.5ZM9 7L6 7L6 5L9 5L9 7ZM1.793 10.5C1.953 10.34 2.138 10.217 2.347 10.13C2.556 10.043 2.774 10 3 10C3.226 10 3.444 10.043 3.653 10.13C3.862 10.217 4.047 10.34 4.207 10.5L4.354 10.646C4.561 10.853 4.72 11.092 4.832 11.362C4.917 11.569 4.97 11.781 4.99 12L6.01 12C6.03 11.781 6.083 11.569 6.168 11.362C6.28 11.092 6.439 10.853 6.646 10.646L6.793 10.5C6.953 10.34 7.138 10.217 7.347 10.13C7.556 10.043 7.774 10 8 10C8.226 10 8.444 10.043 8.653 10.13C8.862 10.217 9.047 10.34 9.207 10.5L9.354 10.646C9.561 10.853 9.72 11.092 9.832 11.362C9.917 11.569 9.97 11.781 9.99 12L11.01 12C11.03 11.781 11.083 11.569 11.168 11.362C11.28 11.092 11.439 10.853 11.646 10.646L11.793 10.5C11.953 10.34 12.138 10.217 12.347 10.13C12.556 10.043 12.774 10 13 10C13.226 10 13.444 10.043 13.653 10.13C13.862 10.217 14.047 10.34 14.207 10.5L14.354 10.646C14.561 10.853 14.72 11.092 14.832 11.362C14.944 11.633 15 11.914 15 12.207L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L11.5 15C11.359 15 11.241 14.952 11.144 14.856C11.048 14.759 11 14.641 11 14.5L11 13L10 13L10 14.5C10 14.641 9.952 14.759 9.856 14.856C9.759 14.952 9.641 15 9.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 13L5 13L5 14.5C5 14.641 4.952 14.759 4.856 14.856C4.759 14.952 4.641 15 4.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5L1 12.207C1 11.914 1.056 11.633 1.168 11.362C1.28 11.092 1.439 10.853 1.646 10.646L1.793 10.5ZM3.646 11.354L3.5 11.207C3.362 11.069 3.195 11 3 11C2.805 11 2.638 11.069 2.5 11.207L2.354 11.354C2.118 11.589 2 11.874 2 12.207L2 14L4 14L4 12.207C4 11.874 3.882 11.589 3.646 11.354ZM9 12.207C9 11.874 8.882 11.589 8.646 11.354L8.5 11.207C8.362 11.069 8.195 11 8 11C7.805 11 7.638 11.069 7.5 11.207L7.354 11.354C7.118 11.589 7 11.874 7 12.207L7 14L9 14L9 12.207ZM13.646 11.354L13.5 11.207C13.362 11.069 13.195 11 13 11C12.805 11 12.638 11.069 12.5 11.207L12.354 11.354C12.118 11.589 12 11.874 12 12.207L12 14L14 14L14 12.207C14 11.874 13.882 11.589 13.646 11.354Z" />
    </svg>
  );
}

Vue

Vue: see /icons/yard.md

Svelte

Svelte: see /icons/yard.md

HTML img

HTML img: see /icons/yard.md

CSS

CSS: see /icons/yard.md

Data URL

Data URL: see /icons/yard.md

Sprite

Sprite: see /icons/yard.md

SwiftUI

SwiftUI: see /icons/yard.md

Compose

Compose: see /icons/yard.md

Android XML

Android XML: see /icons/yard.md

Flutter

Flutter: see /icons/yard.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 { YardIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

yard, backyard, front yard

Tags

yard, backyard, front-yard, garden, lawn, outdoor, fence, tree, property, real-estate, patio

Category

Buildings

Component name

YardIcon

History

2026-10-29 released in 0.2.0
2026-10-30 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/yard.json · Markdown: /icons/yard.md · SVG: https://gentleface.com/svg/{style}/16/yard.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/yard.png

yard icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More buildings icons

For agents

yard icon