Иконка Webstudio
thesvg-color:webstudio
Иконка Webstudio (thesvg-color:webstudio) — бесплатная SVG-иконка из набора theSVG Color от thesvg.org. Она нарисована на сетке 280 × 280. theSVG Color icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- theSVG Color
- Автор
- thesvg.org
- Лицензия
- MIT
- Размер
- 280 × 280
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280"><g fill="none"><path fill="url(#SVGr9BnDc7d)" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="url(#SVGl5FRmbBh)" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="url(#SVGuV3286Gz)" fill-opacity=".8" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="url(#SVGQka9BdtT)" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="url(#SVG2tAJYdsU)" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="url(#SVGOQNIkbOr)" fill-rule="evenodd" d="m215.591 212.899l45.872-141.475c3.599-11.092-2.472-23.03-13.541-26.631s-22.981 2.477-26.575 13.57l-45.872 141.469c-3.599 11.092 2.472 23.03 13.541 26.631c11.069 3.606 22.982-2.472 26.575-13.564" clip-rule="evenodd"/><path fill="#e63cfe" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGtH35ddvy)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGD44AtcWI)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGX40micgd)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGEQowAdOL)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGEXkumeeW)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGkUcl2ckO)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVG2THoOdoY)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGd8jISbYU)" fill-rule="evenodd" d="M139.994 129.046c5.206 0 9.045 3.055 12.318 6.886c3.637 4.265 6.541 9.552 9.008 15.165c11.091 25.196 13.168 56.718 13.168 56.718c.795 11.638 10.871 20.435 22.485 19.637s20.391-10.899 19.596-22.532c0 0-2.787-39.371-16.654-70.882c-11.892-27.021-32.027-47.263-59.916-47.263s-48.024 20.242-59.915 47.263C66.212 165.549 63.43 204.92 63.43 204.92c-.796 11.638 7.983 21.735 19.596 22.532c11.614.798 21.69-7.999 22.485-19.637c0 0 2.077-31.516 13.167-56.718c2.467-5.608 5.372-10.9 9.008-15.165c3.268-3.831 7.107-6.886 12.308-6.886" clip-rule="evenodd"/><path fill="url(#SVGOfvwsdqo)" fill-rule="evenodd" d="M104.525 199.832L58.653 58.357c-3.593-11.092-15.5-17.176-26.575-13.57c-11.069 3.607-17.14 15.54-13.541 26.631l45.872 141.475c3.599 11.092 15.506 17.176 26.575 13.57c11.069-3.607 17.14-15.539 13.541-26.631" clip-rule="evenodd"/><path fill="url(#SVGUBbPJbiR)" fill-rule="evenodd" d="M104.525 199.832L58.653 58.357c-3.593-11.092-15.5-17.176-26.575-13.57c-11.069 3.607-17.14 15.54-13.541 26.631l45.872 141.475c3.599 11.092 15.506 17.176 26.575 13.57c11.069-3.607 17.14-15.539 13.541-26.631" clip-rule="evenodd"/><path fill="url(#SVGd2B3UbFx)" fill-rule="evenodd" d="M104.525 199.832L58.653 58.357c-3.593-11.092-15.5-17.176-26.575-13.57c-11.069 3.607-17.14 15.54-13.541 26.631l45.872 141.475c3.599 11.092 15.506 17.176 26.575 13.57c11.069-3.607 17.14-15.539 13.541-26.631" clip-rule="evenodd"/><path fill="url(#SVGRSlJEcjV)" fill-rule="evenodd" d="M104.525 199.832L58.653 58.357c-3.593-11.092-15.5-17.176-26.575-13.57c-11.069 3.607-17.14 15.54-13.541 26.631l45.872 141.475c3.599 11.092 15.506 17.176 26.575 13.57c11.069-3.607 17.14-15.539 13.541-26.631" clip-rule="evenodd"/><path fill="url(#SVGFnNW4Hle)" fill-rule="evenodd" d="M104.525 199.832L58.653 58.357c-3.593-11.092-15.5-17.176-26.575-13.57c-11.069 3.607-17.14 15.54-13.541 26.631l45.872 141.475c3.599 11.092 15.506 17.176 26.575 13.57c11.069-3.607 17.14-15.539 13.541-26.631" clip-rule="evenodd"/><defs><radialGradient id="SVGQka9BdtT" cx="0" cy="0" r="1" gradientTransform="rotate(-64.165 224.72 -77.546)scale(127.494 127.493)" gradientUnits="userSpaceOnUse"><stop offset=".832" stop-color="#4a4efa" stop-opacity="0"/><stop offset="1" stop-color="#4a4efa" stop-opacity=".75"/></radialGradient><radialGradient id="SVG2tAJYdsU" cx="0" cy="0" r="1" gradientTransform="matrix(28.4242 0 0 60.7891 194.115 150.092)" gradientUnits="userSpaceOnUse"><stop offset=".169" stop-color="#11417a"/><stop offset=".926" stop-color="#4069d4" stop-opacity="0"/></radialGradient><radialGradient id="SVGOQNIkbOr" cx="0" cy="0" r="1" gradientTransform="matrix(0 -94.017 45.0586 0 227.016 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".349" stop-color="#e63cfe"/><stop offset="1" stop-color="#e63cfe" stop-opacity="0"/></radialGradient><radialGradient id="SVGtH35ddvy" cx="0" cy="0" r="1" gradientTransform="rotate(-85.767 153.091 8.966)scale(96.8652 86.0088)" gradientUnits="userSpaceOnUse"><stop stop-color="#39fbbb" stop-opacity=".5"/><stop offset=".689" stop-color="#39fbbb"/><stop offset="1" stop-color="#39fbbb" stop-opacity="0"/></radialGradient><radialGradient id="SVGD44AtcWI" cx="0" cy="0" r="1" gradientTransform="rotate(237.371 194.39 33.656)scale(232.221 56.4955)" gradientUnits="userSpaceOnUse"><stop stop-color="#e63cfe"/><stop offset="1" stop-color="#e63cfe" stop-opacity="0"/></radialGradient><radialGradient id="SVGX40micgd" cx="0" cy="0" r="1" gradientTransform="rotate(-85.02 172.465 20.873)scale(104.495 89.8863)" gradientUnits="userSpaceOnUse"><stop offset=".557" stop-color="#4a4efa"/><stop offset=".935" stop-color="#4a4efa" stop-opacity="0"/></radialGradient><radialGradient id="SVGEQowAdOL" cx="0" cy="0" r="1" gradientTransform="rotate(-68.637 217.157 31.878)scale(109.126 65.1232)" gradientUnits="userSpaceOnUse"><stop offset=".613" stop-color="#e63cfe"/><stop offset="1" stop-color="#e63cfe" stop-opacity="0"/></radialGradient><radialGradient id="SVGEXkumeeW" cx="0" cy="0" r="1" gradientTransform="rotate(176.233 104.532 77.818)scale(135.493 342.53)" gradientUnits="userSpaceOnUse"><stop offset=".814" stop-color="#4a98d0" stop-opacity="0"/><stop offset=".973" stop-color="#11417a"/></radialGradient><radialGradient id="SVGkUcl2ckO" cx="0" cy="0" r="1" gradientTransform="matrix(0 -97.1075 80.5718 0 100.227 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".458" stop-color="#ffae3c"/><stop offset="1" stop-color="#ffae3c" stop-opacity="0"/></radialGradient><radialGradient id="SVG2THoOdoY" cx="0" cy="0" r="1" gradientTransform="matrix(0 -87.529 87.528 0 217.978 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".192" stop-color="#e63cfe"/><stop offset="1" stop-color="#e63cfe" stop-opacity="0"/></radialGradient><radialGradient id="SVGd8jISbYU" cx="0" cy="0" r="1" gradientTransform="matrix(0 -65.8652 31.287 0 166.628 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".174" stop-color="#ffae3c"/><stop offset="1" stop-color="#ffae3c" stop-opacity="0"/></radialGradient><radialGradient id="SVGUBbPJbiR" cx="0" cy="0" r="1" gradientTransform="rotate(161.042 21.048 54.862)scale(29.5497 144.294)" gradientUnits="userSpaceOnUse"><stop offset=".12" stop-color="#4a4efa"/><stop offset="1" stop-color="#4a4efa" stop-opacity="0"/></radialGradient><radialGradient id="SVGRSlJEcjV" cx="0" cy="0" r="1" gradientTransform="matrix(0 -94.9397 103.714 0 105.562 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".465" stop-color="#ffae3c"/><stop offset=".926" stop-color="#ffae3c" stop-opacity="0"/></radialGradient><radialGradient id="SVGFnNW4Hle" cx="0" cy="0" r="1" gradientTransform="matrix(0 -207.732 207.73 0 105.562 227.502)" gradientUnits="userSpaceOnUse"><stop offset=".844" stop-color="#e63cfe" stop-opacity="0"/><stop offset="1" stop-color="#e63cfe"/></radialGradient><linearGradient id="SVGr9BnDc7d" x1="285.998" x2="217.306" y1="-2.595" y2="219.523" gradientUnits="userSpaceOnUse"><stop stop-color="#4a4efa"/><stop offset=".549" stop-color="#e63cfe"/></linearGradient><linearGradient id="SVGl5FRmbBh" x1="199.725" x2="238.638" y1="125.449" y2="138.045" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-color="#4a4efa"/><stop offset=".946" stop-color="#4a4efa" stop-opacity="0"/></linearGradient><linearGradient id="SVGuV3286Gz" x1="205.622" x2="230.072" y1="106.773" y2="114.593" gradientUnits="userSpaceOnUse"><stop stop-color="#39fbbb"/><stop offset="1" stop-color="#39fbbb" stop-opacity="0"/></linearGradient><linearGradient id="SVGOfvwsdqo" x1="10.293" x2="69.52" y1="52.578" y2="236.841" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-color="#e63cfe"/><stop offset=".709" stop-color="#ffae3c"/></linearGradient><linearGradient id="SVGd2B3UbFx" x1="84.766" x2="76.471" y1="138.7" y2="141.415" gradientUnits="userSpaceOnUse"><stop stop-color="#e63cfe" stop-opacity=".33"/><stop offset="1" stop-color="#e63cfe" stop-opacity="0"/></linearGradient></defs></g></svg>Как использовать иконку Webstudio
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:webstudio" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:webstudio" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:webstudio" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--webstudio]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:webstudio"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:webstudio"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/thesvg-color/webstudio.svg" alt="Иконка Webstudio" width="24" height="24">Вопросы и ответы: Иконка Webstudio
Можно ли бесплатно использовать иконку Webstudio в коммерческих проектах?
Да. theSVG Color icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку Webstudio в React?
Установите @iconify/react и выведите <Icon icon="thesvg-color:webstudio" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку Webstudio на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/thesvg-color/webstudio.svg" alt="Иконка Webstudio">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.