Webstudio icon

thesvg-color:webstudio

The Webstudio icon (thesvg-color:webstudio) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 280 × 280 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: 280 × 280

Download SVG

SVG code

<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>

How to use the Webstudio icon

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>

Web component

<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 image

<img src="https://iconyz.com/api/public/svg/thesvg-color/webstudio.svg" alt="Webstudio icon" width="24" height="24">

Webstudio icon FAQ

Is the Webstudio 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 Webstudio icon in React?

Install @iconify/react and render <Icon icon="thesvg-color:webstudio" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Webstudio icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/webstudio.svg" alt="Webstudio icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →