Add icons to this collection by clicking the heart icon.
Step By Step icon - also known as graphic, speech bubble, organization, infographic, communications, business and finance, and step by step. Created in a clean flat style with a white, silver, red, teal, orange, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<path
fill="#fd6930"
d="m154.916 275.232-71.772-29.628c.008.129.02.257.02.388v65.09l71.752-29.62c2.779-1.148 2.779-5.083 0-6.23z"
/>
<path
fill="#ef4424"
d="M83.144 245.604c.008.129.02.257.02.388v65.09l22.01-9.086v-47.298z"
/>
<g fill="#cdbfba">
<path
d="M76.664 238.491a7.5 7.5 0 0 0-7.5 7.5v156.224c2.454-.338 4.955-.527 7.5-.527s5.046.189 7.5.527V245.991a7.5 7.5 0 0 0-7.5-7.5zM224.808 63.156c-.579-2.408-.894-4.917-.894-7.5s.315-5.092.894-7.5h-94.016c.338 2.454.527 4.955.527 7.5s-.189 5.046-.527 7.5zM404.144 63.156c-.579-2.408-.894-4.917-.894-7.5s.315-5.092.894-7.5H287.192c.579 2.408.894 4.917.894 7.5s-.315 5.092-.894 7.5zM224.808 463.844c-.579-2.408-.894-4.917-.894-7.5s.315-5.092.894-7.5h-94.016c.338 2.454.527 4.955.527 7.5s-.189 5.046-.527 7.5zM404.144 463.844c-.579-2.408-.894-4.917-.894-7.5s.315-5.092.894-7.5H287.192c.579 2.408.894 4.917.894 7.5s-.315 5.092-.894 7.5zM427.836 310.129v115.023c2.408-.579 4.917-.894 7.5-.894s5.092.315 7.5.894V310.129c-2.454.338-4.955.527-7.5.527s-5.046-.189-7.5-.527zM435.336 87.742c-2.583 0-5.092-.315-7.5-.894v115.023c2.454-.338 4.955-.527 7.5-.527s5.046.189 7.5.527V86.848a32.034 32.034 0 0 1-7.5.894z"
/>
</g>
<circle cx="76.664" cy="55.656" r="55.656" fill="#fd6930" />
<path
fill="#ef4424"
d="M56.174 66.476c-1.714-3.232-2.689-6.914-2.689-10.82s.975-7.588 2.689-10.82c3.93-19.93 18.495-36.037 37.543-42.163A55.56 55.56 0 0 0 76.664 0C45.926 0 21.008 24.918 21.008 55.656s24.918 55.656 55.656 55.656a55.59 55.59 0 0 0 17.053-2.672c-19.048-6.127-33.613-22.234-37.543-42.164z"
/>
<circle cx="76.664" cy="55.656" r="23.179" fill="#fff" />
<path
fill="#fd9468"
d="M76.664 86.335c-16.917 0-30.679-13.763-30.679-30.679s13.763-30.679 30.679-30.679 30.679 13.762 30.679 30.679-13.762 30.679-30.679 30.679zm0-46.358c-8.646 0-15.679 7.033-15.679 15.679s7.034 15.679 15.679 15.679 15.679-7.034 15.679-15.679-7.033-15.679-15.679-15.679z"
/>
<circle cx="256" cy="55.656" r="33.086" fill="#05e39c" />
<path
fill="#0ed290"
d="M248.789 55.656c0-13.682 8.305-25.422 20.148-30.459A32.98 32.98 0 0 0 256 22.57c-18.273 0-33.086 14.813-33.086 33.086S237.727 88.742 256 88.742c4.591 0 8.963-.936 12.937-2.627-11.843-5.037-20.148-16.777-20.148-30.459z"
/>
<circle cx="435.336" cy="55.656" r="33.086" fill="#ffd15b" />
<path
fill="#ffc344"
d="M428.04 55.656c0-13.698 8.325-25.451 20.191-30.478a32.975 32.975 0 0 0-12.895-2.608c-18.273 0-33.086 14.813-33.086 33.086s14.813 33.086 33.086 33.086c4.575 0 8.932-.929 12.895-2.608-11.866-5.027-20.191-16.78-20.191-30.478z"
/>
<circle cx="76.664" cy="456.344" r="55.656" fill="#fd6930" />
<path
fill="#ef4424"
d="M56.174 467.164c-1.714-3.232-2.689-6.914-2.689-10.82s.975-7.588 2.689-10.82c3.929-19.93 18.495-36.037 37.543-42.163a55.59 55.59 0 0 0-17.053-2.672c-30.738 0-55.656 24.918-55.656 55.656S45.926 512 76.664 512a55.59 55.59 0 0 0 17.053-2.672c-19.048-6.127-33.613-22.234-37.543-42.164z"
/>
<circle cx="76.664" cy="456.344" r="23.179" fill="#fff" />
<path
fill="#fd9468"
d="M76.664 487.023c-16.917 0-30.679-13.762-30.679-30.679s13.763-30.679 30.679-30.679 30.679 13.763 30.679 30.679-13.762 30.679-30.679 30.679zm0-46.358c-8.646 0-15.679 7.034-15.679 15.679s7.034 15.679 15.679 15.679 15.679-7.033 15.679-15.679-7.033-15.679-15.679-15.679z"
/>
<circle cx="256" cy="456.344" r="33.086" fill="#01d0fb" />
<path
fill="#01c0fa"
d="M248.789 456.344c0-13.682 8.305-25.422 20.148-30.459A32.98 32.98 0 0 0 256 423.258c-18.273 0-33.086 14.813-33.086 33.086S237.727 489.43 256 489.43a32.98 32.98 0 0 0 12.937-2.627c-11.843-5.037-20.148-16.777-20.148-30.459z"
/>
<circle cx="435.336" cy="456.344" r="33.086" fill="#05e39c" />
<path
fill="#0ed290"
d="M428.04 456.344c0-13.698 8.325-25.451 20.191-30.478a32.975 32.975 0 0 0-12.895-2.608c-18.273 0-33.086 14.813-33.086 33.086s14.813 33.086 33.086 33.086c4.575 0 8.932-.929 12.895-2.608-11.866-5.027-20.191-16.78-20.191-30.478z"
/>
<circle cx="435.336" cy="256" r="55.656" fill="#fd6930" />
<path
fill="#ef4424"
d="M419.26 272.675c-4.374-4.219-7.104-10.132-7.104-16.675s2.729-12.456 7.104-16.675c5.242-16.702 18.141-30.012 34.59-35.814a55.538 55.538 0 0 0-18.514-3.167c-30.738 0-55.656 24.918-55.656 55.656s24.918 55.656 55.656 55.656a55.529 55.529 0 0 0 18.514-3.167c-16.448-5.802-29.347-19.112-34.59-35.814z"
/>
<circle cx="435.336" cy="256" r="23.179" fill="#fff" />
<path
fill="#fd9468"
d="M435.336 286.679c-16.916 0-30.679-13.763-30.679-30.679s13.763-30.679 30.679-30.679 30.679 13.763 30.679 30.679-13.763 30.679-30.679 30.679zm0-46.358c-8.646 0-15.679 7.034-15.679 15.679s7.033 15.679 15.679 15.679 15.679-7.034 15.679-15.679-7.034-15.679-15.679-15.679z"
/>
<path
fill="#ffe177"
d="m391.843 247.658-40.551-23.412a3.09 3.09 0 0 1-1.545-2.676v-33.561c0-5.69-4.612-10.302-10.302-10.302H196.25c-5.69 0-10.302 4.612-10.302 10.302v135.984c0 5.69 4.612 10.302 10.302 10.302h143.195c5.69 0 10.302-4.612 10.302-10.302V279.1a3.09 3.09 0 0 1 1.545-2.676l40.551-23.412c2.061-1.191 2.061-4.165 0-5.354z"
/>
<path
fill="#ffd15b"
d="M238.487 323.992V188.008c0-5.689 4.612-10.302 10.302-10.302H196.25c-5.69 0-10.302 4.612-10.302 10.302v135.984c0 5.69 4.612 10.302 10.302 10.302h52.539c-5.69 0-10.302-4.613-10.302-10.302z"
/>
<path
fill="#fff"
d="M306.994 229.787H228.7a7.5 7.5 0 0 1 0-15h78.294c4.143 0 7.5 3.358 7.5 7.5s-3.357 7.5-7.5 7.5zM306.994 263.5H228.7a7.5 7.5 0 0 1 0-15h78.294c4.143 0 7.5 3.358 7.5 7.5s-3.357 7.5-7.5 7.5zM273.87 297.213H228.7a7.5 7.5 0 0 1 0-15h45.17c4.143 0 7.5 3.358 7.5 7.5s-3.357 7.5-7.5 7.5z"
/>
</svg>
More icons in the same style and category