Beta

Window Frame SVG element, flat

Free

Crossing bars divide a rectangular window outline into four panes. Use it in a house diagram or as a section marker on a property listing.

Sign in to download. Free SVGs are free with any account.

windowframepanesbuildingframeselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/kmFm07_Z-yxE/amnt.svg" alt="Window Frame" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M24 12H176L188 24V176L176 188H24L12 176V24ZM38 36V94H94V36ZM106 36V94H162V36ZM38 106V164H94V106ZM106 106V164H162V106Z"/><path d="M24 12 38 36M176 12 162 36M12 24 38 36M188 24 162 36M12 176 38 164M188 176 162 164M24 188 38 164M176 188 162 164Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
CSS background-image
.window-frame {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/kmFm07_Z-yxE/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.window-frame {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/kmFm07_Z-yxE/amnt.svg") center / contain no-repeat;
}
React
import WindowFrameSvg from "./window-frame.jsx"; // from the React tab above

<WindowFrameSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Window Frame: Rectangular window outline divided into four panes by crossing bars. as part of the pack Frames elements, flat. Want one like it? Make your own in the SVG studio.

Rest of Frames elements, flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence