Home/Libraries/SVG Logos (Iconify)/windi-css

SVG Logos (Iconify)

WindiCss

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 279"><defs><linearGradient id="SVGPPQVhuQy" x1="16.639%" x2="137.275%" y1="36.186%" y2="175.371%"><stop offset="7.822%" stop-color="#54c8f1"/><stop offset="57.292%" stop-color="#41a2ef"/><stop offset="100%" stop-color="#3386ee"/></linearGradient><linearGradient id="SVG2EiljeKP" x1="-22.099%" x2="91.451%" y1="-49.621%" y2="73.695%"><stop offset="7.822%" stop-color="#54c8f1"/><stop offset="57.292%" stop-color="#41a2ef"/><stop offset="100%" stop-color="#3386ee"/></linearGradient><linearGradient id="SVG0BXjlbLl" x1="8.696%" x2="71.739%" y1="37.461%" y2="80.271%"><stop offset="7.822%" stop-color="#54c8f1"/><stop offset="57.292%" stop-color="#41a2ef"/><stop offset="100%" stop-color="#3386ee"/></linearGradient><linearGradient id="SVGUwJDreYt" x1="60.744%" x2="501.135%" y1="-308.636%" y2="225.788%"><stop offset="7.822%" stop-color="#54c8f1"/><stop offset="57.292%" stop-color="#41a2ef"/><stop offset="100%" stop-color="#3386ee"/></linearGradient></defs><path fill="url(#SVGPPQVhuQy)" d="M133.784 48.922C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978c11.56 0 20.966 9.407 20.966 20.967s-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921m0 0C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978c11.56 0 20.966 9.407 20.966 20.967s-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921"/><path fill="url(#SVG2EiljeKP)" d="M195.803 229.339c0 26.978-21.945 48.922-48.922 48.922c-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979c11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922m0 0c0 26.978-21.945 48.922-48.922 48.922c-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979c11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922"/><path fill="url(#SVG0BXjlbLl)" d="M203.13 43.13c-30.834 0-52.585 23.45-52.585 54.284h24.76c0-15.327 11.13-26.457 27.825-26.457c16.696 0 25.044 11.13 25.044 26.457s-10.842 27.955-40.348 27.955H0v27.956h192c43.695 0 64-28.085 64-55.911c0-30.835-20.87-54.284-52.87-54.284"/><path fill="url(#SVGUwJDreYt)" d="M36.647 180.417H0v28.19h36.647z"/></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. WindiCssIcon.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.