ICONYZ
English
Weavefox icon from theSVG Color

Weavefox icon

thesvg-color:weavefox

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

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><defs><linearGradient id="SVGXMvH1dgZ" x1="0%" x2="100%" y1="50%" y2="50%" color-interpolation="sRGB"><stop offset="0%" stop-color="#9189fc"/><stop offset="27%" stop-color="#5c87fd"/><stop offset="52%" stop-color="#268efd"/><stop offset="74%" stop-color="#099afd"/><stop offset="100%" stop-color="#159cfe"/></linearGradient><linearGradient id="SVGvfq1ie1c" x1="0%" x2="100%" y1="46%" y2="54%" color-interpolation="sRGB"><stop offset="0%" stop-color="#35f8be"/><stop offset="10%" stop-color="#28e2cf"/><stop offset="23%" stop-color="#18c5e1"/><stop offset="37%" stop-color="#0db1ed"/><stop offset="51%" stop-color="#06a3f7"/><stop offset="66%" stop-color="#0199fe"/><stop offset="100%" stop-color="#0097ff"/></linearGradient><radialGradient id="SVGD10T1dqV" cx="740" cy="180" r="310" color-interpolation="sRGB" fx="740" fy="180" gradientTransform="matrix(1.2 0 0 1 -148 0)" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#7efedc"/><stop offset="18%" stop-color="#6efada"/><stop offset="35%" stop-color="#6df6e3"/><stop offset="46%" stop-color="#3cfbc8"/><stop offset="55%" stop-color="#77eff4"/><stop offset="72%" stop-color="#7eedfa"/><stop offset="100%" stop-color="#83eff6"/></radialGradient></defs><path fill="url(#SVGD10T1dqV)" d="M735.304 161.057c-3.708.753-7.419 2.103-11.029 4.117q-72.08 40.243-144.161 80.483l-133.906 74.754l-57.495 32.098l-109.584 61.178l176.842 103.211l204.071 119.103q27.01 15.763 54.016 31.526l45.929-324.189l19.841-140.059c1.518-10.706-1.456-20.408-7.12-27.871c-7.039-9.269-18.227-15.085-30.127-15.084c-2.406 0-4.842.238-7.277.733"/><path fill="url(#SVGXMvH1dgZ)" d="M198.049 174.176c-5.701 7.437-8.721 17.122-7.256 27.835l19.161 140.156l44.353 324.407l54.167-31.262l204.648-118.11l177.343-102.35l-109.286-61.711l-57.339-32.376q-66.77-37.701-133.541-75.405l-143.768-81.181c-3.6-2.032-7.305-3.4-11.008-4.171a36.5 36.5 0 0 0-7.451-.769c-11.834-.001-22.975 5.749-30.023 14.937"/><path fill="url(#SVGvfq1ie1c)" d="M66.309 428.24c-35.986 61.172-52.863 133.78-40.413 202.27c6.057 33.323 18.713 65.465 38.643 94.329c16.63 24.084 38.327 45.89 65.481 64.194c72.249 48.706 175.558 79.954 302.206 43.025c92.83-27.068 161.078-74.466 236.624-111.99c14.677-7.291 29.628-14.209 45.09-20.531c101.104-41.351 200.298-54.099 269.732-10.34c-.536-6.383-1.592-14.817-3.342-24.776c-3.595-20.465-10.124-47.371-21.11-76.137c-8.049-21.068-18.489-43.132-31.92-64.394c-28.588-45.247-70.725-86.857-132.204-107.492c-60.159-20.193-111.811-23.366-158.347-17.727c-109.062 13.223-188.329 72.071-286.554 79.32c-137.49 10.146-212.886-45.601-206.875-125.454c-26.618 12.879-59.246 45.507-77.011 75.703"/></svg>

How to use the Weavefox icon

React

import { Icon } from "@iconify/react";

<Icon icon="thesvg-color:weavefox" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="thesvg-color:weavefox" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="thesvg-color:weavefox" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--weavefox]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:weavefox"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="thesvg-color:weavefox"></iconify-icon>

HTML image

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

Weavefox icon FAQ

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

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

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

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

Browse all theSVG Color icons →