Colours and style

Every picture in the library follows these, and so does every download.

Colour of single-colour icons
Palette for colourful pictures
As drawn
100%
Step By Step SVG illustration, animated

Step By Step SVG illustration, animated

Three connected circles show a pointer, gear, and checkmark without step numbers. Use the sequence in setup guides and workshop handouts.

Free · from Moving scenes

It moves

step-by-step, moving

This one moves. The file carries its own motion and stays still for anyone who asked their device for less motion.

Similar SVGs

More from Moving scenes

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/M0q51fxysJKO/amnt.svg" alt="Step By Step" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="midnight" data-name="Midnight"><path d="M672 453c-7-22-15-44-30-63-65-87-203-83-264 6-13 18-18 37-25 56-12-4-22-3-34 0-3-24-17-48-32-67-98-118-282-44-284 106-1 79 61 153 140 162 63 8 127-22 159-78 8-14 11-29 18-43 12 1 21 1 34-1 0 12 7 25 12 35 28 55 86 89 147 90 76 1 138-54 158-126 12 5 22 4 34 1 5 17 10 32 19 47 85 138 300 74 297-87-3-183-255-236-316-39-11-3-24-5-33 1zM507 346c59-2 115 34 138 89 3 8 8 20 8 30 0 7-5 14-6 21-2 15 5 19 6 31 2 21-21 57-35 72-26 29-63 45-101 46-40 1-78-14-106-41-15-14-42-56-40-77 1-9 7-16 7-25 0-10-6-17-7-26-2-21 22-60 37-75 26-26 61-43 99-45zm-354 1c61-4 120 33 141 91 3 8 9 20 8 28-1 4-5 8-6 12-8 22 3 24 5 39 2 18-17 51-28 65-23 28-57 48-93 52-139 13-213-163-107-253 23-19 50-32 80-34zm694 0c143-12 210 177 95 261-21 15-46 25-72 26-59 3-114-29-138-84-3-9-10-22-9-31 1-6 6-11 7-17 4-21-5-22-7-36-3-18 18-54 30-68 24-28 57-48 94-51zM339 514h-7c-27-2-24-45 4-45 27 0 30 43 3 45zm353 0h-6c-27 1-25-45 3-45 27 0 31 43 3 45z" fill="#031532" stroke="#031532"/><path d="M834 490c-9-8-18-20-29-24-29-11-54 20-42 47 4 10 14 17 21 25 10 9 18 22 29 29 31 23 64-22 83-43 15-16 56-50 64-67s2-38-14-46c-10-5-21-5-31-1-16 7-66 64-81 80zm91-65c15-3 25 12 18 25-3 6-11 11-16 17-14 13-28 27-41 41-9 9-35 41-45 45-6 2-10 2-16 0-10-4-20-20-28-27-9-10-28-24-16-39 3-4 8-6 13-6 19 2 28 42 48 26 14-12 72-79 83-82z" fill="#031532" stroke="#031532"/></g><g id="grey-7f8c8d" data-name="Grey"><path d="M847 347c-37 3-70 23-94 51-12 14-33 50-30 68 2 14 11 15 7 36-1 6-6 11-7 17-1 9 6 22 9 31 24 55 79 87 138 84 26-1 51-11 72-26 115-84 48-273-95-261zM834 490c15-16 65-73 81-80 10-4 21-4 31 1 16 8 22 29 14 46s-49 51-64 67c-19 21-52 66-83 43-11-7-19-20-29-29-7-8-17-15-21-25-12-27 13-58 42-47 11 4 20 16 29 24z" fill="#7f8c8d" stroke="#7f8c8d"/><path d="M686 514h6c28-2 24-45-3-45-28 0-30 46-3 45z" fill="#7f8c8d" stroke="#7f8c8d"/></g><g id="white" data-name="White"><path d="M504 393c-12 5 0 21-20 29-3 1-6 3-9 3-14 0-15-18-29-4-2 2-6 4-7 7-5 14 18 15 2 42-9 15-24 0-25 23 0 2-1 8 0 10 5 12 18-3 28 20 1 3 3 6 3 9 2 14-17 16-3 31 1 2 4 5 6 6 13 6 19-17 40-3 14 9 1 26 22 26 2 0 7 1 10-1 10-5-1-19 19-28 3-1 6-3 9-3 14 1 14 19 30 5 1-1 5-4 6-7 5-14-18-18-2-42 10-14 24 1 25-21 0-4 1-9-1-12-4-9-18 1-27-19-1-3-4-6-4-10-1-15 23-23 0-36-15-8-19 15-41 1-15-9-2-25-21-26-3 0-8-1-11 0zm0 56c59-9 71 78 17 87-60 9-71-78-17-87z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M110 418c-2 8 15 126 19 133 7-6 24-33 33-30 4 1 7 9 10 13 4 6 23 38 28 40 5 1 8-2 12-4 2-1 6-3 7-6 3-9-20-36-26-45-2-4-8-10-7-15 1-7 34-18 42-21-28-12-97-60-118-65z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M925 425c-11 3-69 70-83 82-20 16-29-24-48-26-5 0-10 2-13 6-12 15 7 29 16 39 8 7 18 23 28 27 6 2 10 2 16 0 10-4 36-36 45-45 13-14 27-28 41-41 5-6 13-11 16-17 7-13-3-28-18-25z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="pointer" data-name="Pointer" data-motion="tap@bottom"><g><path d="M153 347c-30 2-57 15-80 34-106 90-32 266 107 253 36-4 70-24 93-52 11-14 30-47 28-65-2-15-13-17-5-39 1-4 5-8 6-12 1-8-5-20-8-28-21-58-80-95-141-91zm56 163c15 22 45 53 14 75-36 26-47-16-65-39-7 7-11 17-19 22-32 22-33-41-35-57-3-19-17-86-14-99 2-8 9-14 17-14 15-1 77 39 94 49 14 8 64 27 38 49-8 7-21 9-30 14z" fill="#2f80ed" stroke="#2f80ed"/><path d="M209 510c9-5 22-7 30-14 26-22-24-41-38-49-17-10-79-50-94-49-8 0-15 6-17 14-3 13 11 80 14 99 2 16 3 79 35 57 8-5 12-15 19-22 18 23 29 65 65 39 31-22 1-53-14-75zm-99-92c21 5 90 53 118 65-8 3-41 14-42 21-1 5 5 11 7 15 6 9 29 36 26 45-1 3-5 5-7 6-4 2-7 5-12 4-5-2-24-34-28-40-3-4-6-12-10-13-9-3-26 24-33 30-4-7-21-125-19-133z" fill="#031532" stroke="#031532"/></g><g><path d="M332 514h7c27-2 24-45-3-45-28 0-31 43-4 45z" fill="#2f80ed" stroke="#2f80ed"/></g></g><g id="gear" data-name="Gear" data-motion="spin@center"><g><path d="M507 346c-38 2-73 19-99 45-15 15-39 54-37 75 1 9 7 16 7 26 0 9-6 16-7 25-2 21 25 63 40 77 28 27 66 42 106 41 38-1 75-17 101-46 14-15 37-51 35-72-1-12-8-16-6-31 
…
CSS background-image
.step-by-step {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/M0q51fxysJKO/amnt.svg");
  background-size: contain;
}
React
import StepByStepSvg from "./step-by-step.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Step By Step: Three connected numbered-free circles containing a pointer, gear, and checkmark. A flat illustration. as part of the pack Moving scenes. 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