Stairs SVG pattern, flat

Free

Preview on the whole page

Short three-step flights repeat diagonally, with each top and riser visible. Add them to architecture worksheets or use them on event programme covers.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

stairs steps geometry isometric pattern flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Z9kkMDUcmOL-/amnt.svg" alt="Stairs" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f4e9d8"/><defs><g id="stairs"><path fill="#704d5b" d="M54 16 66 8 66 20 54 28ZM42 32 54 24 54 36 42 44ZM30 48 42 40 42 52 30 60Z"/><path fill="#cc6c55" d="M24 16h30v12H24zM12 32h30v12H12zM0 48h30v12H0z"/><path fill="#fbbf77" d="M24 16 36 8h30L54 16ZM12 32 24 24h30L42 32ZM0 48 12 40h30L30 48Z"/></g></defs><use href="#stairs" x="17" y="18"/><use href="#stairs" x="117" y="18"/><use href="#stairs" x="17" y="118"/><use href="#stairs" x="117" y="118"/></svg>

CSS background-image

.stairs {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Z9kkMDUcmOL-/amnt.svg");
  background-size: 200px 200px;
}

React

import StairsSvg from "./stairs.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Stairs: Short flights of three steps repeat diagonally, each with visible tops and risers. as part of the pack Isometric Patterns, Flat. Want one like it? Make your own in the SVG studio.

Rest of Isometric Patterns, 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