Progress Steps SVG illustration, flat

Progress Steps SVG illustration, flat

Four circles form a horizontal path, with two filled and the third highlighted. Use it above a multi-page form or in a setup progress guide.

Similar SVGs

More from Onboarding Illustrations, Flat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/fOsYrYhJGWY3/amnt.svg" alt="Progress Steps" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none"><ellipse cx="200" cy="214" rx="151" ry="11" fill="#DEDCE8" opacity=".45"/><rect x="62" y="143" width="276" height="10" rx="5" fill="#DEDCE8"/><rect x="62" y="143" width="92" height="10" rx="5" fill="#8DB5A7"/><path d="M154 148H232" stroke="#8DB5A7" stroke-width="3" stroke-linecap="round" stroke-dasharray="5 8"/><circle cx="62" cy="151" r="25" fill="#DEDCE8"/><circle cx="62" cy="148" r="25" fill="#8DB5A7"/><path d="m51 148 8 8 14-16" stroke="#F7F3E9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="154" cy="151" r="25" fill="#DEDCE8"/><circle cx="154" cy="148" r="25" fill="#8DB5A7"/><path d="m143 148 8 8 14-16" stroke="#F7F3E9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="246" cy="148" r="37" fill="#F2E2B5" opacity=".65"/><circle cx="246" cy="148" r="30" stroke="#D6AC60" stroke-width="2"/><circle cx="246" cy="148" r="24" fill="#E8C77E"/><path d="M236 148h20m-8-8 8 8-8 8" stroke="#655E76" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle cx="338" cy="151" r="25" fill="#DEDCE8"/><circle cx="338" cy="148" r="24" fill="#F7F3E9" stroke="#C4BF D2" stroke-width="0"/><circle cx="338" cy="148" r="24" stroke="#B8B2C7" stroke-width="2"/><circle cx="338" cy="148" r="5" fill="#B8B2C7"/><path d="M246 95v-9m-27 17-6-7m60 7 6-7" stroke="#D6AC60" stroke-width="3" stroke-linecap="round"/><rect x="44" y="188" width="36" height="5" rx="2.5" fill="#8DB5A7" opacity=".45"/><rect x="136" y="188" width="36" height="5" rx="2.5" fill="#8DB5A7" opacity=".45"/><rect x="228" y="194" width="36" height="5" rx="2.5" fill="#E8C77E"/><rect x="320" y="188" width="36" height="5" rx="2.5" fill="#DEDCE8"/></svg>
CSS background-image
.progress-steps {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/fOsYrYhJGWY3/amnt.svg");
  background-size: contain;
}
React
import ProgressStepsSvg from "./progress-steps.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Progress Steps: Horizontal path of four circles, with two filled and the third highlighted. as part of the pack Onboarding Illustrations, Flat. Want one like it? Make your own in the SVG studio.

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

Settings