Home/Libraries/SVG Logos (Iconify)/stepsize-icon

SVG Logos (Iconify)

StepsizeIcon

License: CC0-1.0Commercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 236"><defs><linearGradient id="logosStepsizeIcon0" x1="32.521%" x2="102.581%" y1="-18.705%" y2="72.992%"><stop offset="0%" stop-color="#613AB5"/><stop offset="19.808%" stop-color="#613AB5"/><stop offset="100%" stop-color="#D11E8E"/></linearGradient><linearGradient id="logosStepsizeIcon1" x1="-2.438%" x2="67.621%" y1="26.908%" y2="118.609%"><stop offset="0%" stop-color="#613AB5"/><stop offset="19.808%" stop-color="#613AB5"/><stop offset="100%" stop-color="#D11E8E"/></linearGradient><linearGradient id="logosStepsizeIcon2" x1="67.479%" x2="-2.581%" y1="118.709%" y2="27.009%"><stop offset="0%" stop-color="#D11E8E"/><stop offset="80.192%" stop-color="#613AB5"/><stop offset="100%" stop-color="#613AB5"/></linearGradient><linearGradient id="logosStepsizeIcon3" x1="102.438%" x2="32.377%" y1="73.093%" y2="-18.613%"><stop offset="0%" stop-color="#D11E8E"/><stop offset="80.192%" stop-color="#613AB5"/><stop offset="100%" stop-color="#613AB5"/></linearGradient></defs><path fill="#818cf8" d="M256 56.391L214.943.813H97.41L61.182 112.775l41.057 55.579L137.66 56.391zM153.761 66.863l40.252 55.578l-34.616 111.963H41.057L0 178.826h118.34z"/><path fill="#818cf8" d="m158.866 235.204l-58.858-.175l17.707-56.218z"/><path fill="#818cf8" d="m99.997 235.012l-58.858-.176l17.707-56.217zm35.42-112.417l58.858.176l-17.707 56.217z"/><path fill="#818cf8" d="m0 178.465l58.857.175l-17.706 56.217zm194.275-55.7l-58.858-.175l17.707-56.218z"/><path fill="#818cf8" d="m117.713 178.811l58.857.176l-17.706 56.217z"/><path fill="url(#logosStepsizeIcon0)" d="m99.997 235.031l17.704-56.216l-58.857-.175z"/><path fill="url(#logosStepsizeIcon1)" d="m117.713 178.815l58.857.173l-41.153-56.393z"/><path fill="#818cf8" d="m97.13 0l58.858.175l-17.707 56.218z"/><path fill="#818cf8" d="m156 .199l58.857.175l-17.706 56.218zm-35.421 112.416l-58.857-.175l17.706-56.217z"/><path fill="#818cf8" d="m255.996 56.746l-58.857-.175L214.846.353zM61.722 112.439l58.857.175l-17.707 56.218z"/><path fill="#818cf8" d="m138.283 56.393l-58.857-.175L97.132 0z"/><path fill="url(#logosStepsizeIcon2)" d="m138.295 56.393l58.858.173L156 .174z"/><path fill="url(#logosStepsizeIcon3)" d="m120.574 112.615l17.707-56.217l-58.855-.175z"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. StepsizeIconIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC0-1.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.