Beta

Step By Step SVG illustration, flat

Free
Step By Step SVG illustration, flat

Connected circles show a pointer, gear, and checkmark in sequence, without numbers. Use the illustration in an installation guide or a classroom handout.

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

guidesequenceinstructionsonboardingillustrationflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YsiZr9eaLEIL/amnt.svg" alt="Step By Step" 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="225" rx="158" ry="11" fill="#DEDDEB" opacity=".45"/><path d="M83 150H317" stroke="#DEDDEB" stroke-width="3" stroke-linecap="round"/><path d="m137 145 5 5-5 5m117-10 5 5-5 5" stroke="#9289AD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="80" cy="154" r="47" fill="#DEDDEB"/><circle cx="200" cy="154" r="47" fill="#DEDDEB"/><circle cx="320" cy="154" r="47" fill="#DEDDEB"/><circle cx="80" cy="148" r="47" fill="#EAE5F1"/><circle cx="200" cy="148" r="47" fill="#F3E7CB"/><circle cx="320" cy="148" r="47" fill="#CEE1D8"/><path d="m66 125 1 47 12-12 11 20 10-6-12-19 17-3Z" fill="#DEDDEB"/><path d="m62 120 1 47 12-12 11 20 10-6-12-19 17-3Z" fill="#9289AD"/><path d="m69 134 1 17 5-5 9-1Z" fill="#EAE5F1"/><path d="m193 117-2 9-7 4-9-3-7 12 7 6v8l-7 6 7 12 9-3 7 4 2 9h14l2-9 7-4 9 3 7-12-7-6v-8l7-6-7-12-9 3-7-4-2-9Z" fill="#D7B978"/><circle cx="200" cy="149" r="16" fill="#F3E7CB"/><circle cx="200" cy="149" r="9" fill="#D7B978"/><path d="m293 147 10-10 13 13 24-27 11 10-35 38Z" fill="#79A895"/><circle cx="57" cy="86" r="4" fill="#D7B978"/><circle cx="345" cy="207" r="3" fill="#9289AD"/><circle cx="227" cy="87" r="3" fill="#79A895"/><path d="m112 85 5-7m167 7 6 5M159 205l-4 6" stroke="#9289AD" stroke-width="3" stroke-linecap="round"/><path d="m32 189 4-5 5 4-4 5Z" fill="#CEE1D8"/><path d="m357 102 4-5 5 4-4 5Z" fill="#D7B978"/></svg>
CSS background-image
.step-by-step {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YsiZr9eaLEIL/amnt.svg");
  background-size: contain;
}
React
import StepByStepSvg from "./step-by-step.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Step By Step: Three connected numbered-free circles containing a pointer, gear, and checkmark. as part of the pack Onboarding Illustrations, Flat. Want one like it? Make your own in the SVG studio.

Rest of Onboarding Illustrations, 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