Ikon Webstudio

thesvg-color:webstudio

Ikon Webstudio (thesvg-color:webstudio) adalah ikon SVG gratis dari set theSVG Color karya thesvg.org. Ikon ini digambar pada grid 280 × 280. theSVG Color icons dirilis di bawah lisensi MIT, yang mengizinkan penggunaan dalam proyek pribadi maupun komersial. Salin sebagai kode SVG, JSX, Vue, atau Svelte, atau unduh file SVG-nya.

Set ikon: theSVG Color
Pembuat: thesvg.org
Lisensi: MIT
Ukuran: 280 × 280

Download SVG

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

Cara memakai ikon 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>

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>

Gambar HTML

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

FAQ Ikon Webstudio

Apakah ikon Webstudio gratis untuk penggunaan komersial?

Ya. theSVG Color icons dirilis di bawah lisensi MIT, yang mengizinkan penggunaan dalam proyek pribadi maupun komersial.

Bagaimana cara memakai ikon Webstudio di React?

Pasang @iconify/react lalu render <Icon icon="thesvg-color:webstudio" />, atau gunakan “Salin kode” di halaman ini untuk mendapatkan komponen React mandiri.

Bagaimana cara menambahkan ikon Webstudio ke halaman web?

Tautkan file SVG di tag gambar: <img src="https://iconyz.com/api/public/svg/thesvg-color/webstudio.svg" alt="Ikon Webstudio">, atau tempel kode SVG langsung di halaman untuk menatanya dengan CSS.

Lihat semua Ikon theSVG Color →