Windi CSS logo
The Windi CSS logo as clean SVG, in brand color and mono. Copy it, download it, or install it as a typed React component.
- Brand color
- #54c8f1
- Categories
- UI & CSS
- Variants
- 2 SVG files
- Website
- windicss.org
- Source
- gilbarbara/logos · CC0
Use the Windi CSS logo
shadcn CLI
npx shadcn@latest add @logoforge/windi-cssFirst time? Add the @logoforge registry to components.json, or use the MCP server.
React
import { WindiCssLogo } from "@/components/logos/windi-css";
<WindiCssLogo className="size-8" />
<WindiCssLogo variant="mono" /> {/* currentColor */}icon.svg
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 279"><title>Windi CSS</title><defs><linearGradient id="windi-css-a" 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="windi-css-b" 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="windi-css-c" 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="windi-css-d" 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(#windi-css-a)" 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.978 11.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.978 11.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(#windi-css-b)" d="M195.803 229.339c0 26.978-21.945 48.922-48.922 48.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.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.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.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(#windi-css-c)" 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.457 16.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.911 0-30.835-20.87-54.284-52.87-54.284"/><path fill="url(#windi-css-d)" d="M36.647 180.417H0v28.19h36.647z"/></svg>Download
Related logos
Windi CSS and the Windi CSS logo are trademarks of their respective owner. Logoforge is not affiliated with or endorsed by Windi CSS; the logo is provided to refer to the product. Follow the brand's own guidelines. Own this brand and want it removed? Contact us — handled within 72 hours.