Windicss icon
thesvg-color:windicss
The Windicss icon (thesvg-color:windicss) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 256 × 279 grid. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 256 × 279
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="279" 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>How to use the Windicss icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:windicss" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:windicss" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:windicss" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--windicss]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:windicss"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:windicss"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/windicss.svg" alt="Windicss icon" width="24" height="24">Windicss icon in other icon sets
Windicss icon FAQ
Is the Windicss icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Windicss icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:windicss" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Windicss icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/windicss.svg" alt="Windicss icon">, or paste the SVG code inline to style it with CSS.