Fennec icon

thesvg-color:fennec

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

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"><defs><filter id="SVGhwPLmdZm" width="1.076" height="1.109" x="-.038" y="-.042"><feFlood flood-color="#000" flood-opacity=".2" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur" stdDeviation=".2"/><feOffset dy=".3" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="composite2"/></filter><filter id="SVGbHEejdpn" width="1.123" height="1.256" x="-.056" y="-.116"><feFlood flood-color="#000" flood-opacity=".2" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur" stdDeviation=".2"/><feOffset dx=".1" dy=".1" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="composite2"/></filter><filter id="SVGc07aIbZb" width="1.122" height="1.261" x="-.055" y="-.118"><feFlood flood-color="#000" flood-opacity=".2" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur" stdDeviation=".2"/><feOffset dx=".1" dy=".1" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="composite2"/></filter><filter id="SVGtn5AbePZ" width="1.304" height="1.304" x="-.159" y="-.159"><feFlood flood-color="#000" flood-opacity=".102" result="flood"/><feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/><feGaussianBlur in="composite1" result="blur" stdDeviation=".2"/><feOffset dx="-.1" dy="-.1" result="offset"/><feComposite in="SourceGraphic" in2="offset" result="composite2"/></filter><radialGradient id="SVGGrEjFbze" cx="-6.321" cy="8.275" r="6.35" fx="-6.321" fy="8.275" gradientTransform="matrix(0 1.82356 -1.99652 0 24.489 20.373)" gradientUnits="userSpaceOnUse" href="#SVGcdV4wbrI"/><linearGradient id="SVGcdV4wbrI"><stop offset="0" stop-color="#fff" stop-opacity=".102"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs><path fill="#fff" d="M8.473 8.822a.53.53 0 0 0-.534.532v6.972c0 .022.006.041.008.063c-.026.123.035.253.189.348l.01.006a.5.5 0 0 0 .1.062l5.567 3.448a.99.99 0 0 0 .951 0l5.566-3.447a.5.5 0 0 0 .105-.066l.006-.003c.153-.095.214-.223.189-.347c.002-.021.009-.042.009-.064V9.354a.529.529 0 0 0-.803-.454l-5.547 3.447L8.739 8.9a.5.5 0 0 0-.266-.078" filter="url(#SVGhwPLmdZm)"/><g stroke="#ffe2af" stroke-width="1.224" transform="matrix(.85963 0 0 .86998 1.787 12.059)"><path fill="#ffe2af" stroke-linecap="square" stroke-linejoin="round" d="M21.317-3.109L14.713.944l6.604 3.96Zm-13.548 0L14.373.944l-6.604 3.96Z"/><path fill="#ffc149" d="m2.1-8.578l8.635 4.136l-.894-4.136Z" filter="url(#SVGbHEejdpn)" transform="matrix(.85299 .52193 -.85299 .52193 -.616 0)"/><g fill="#ffc149" filter="url(#SVGc07aIbZb)" transform="matrix(-.85299 .52193 .85299 .52193 29.7 0)"><path d="m2.1-8.578l8.71 4.061l-.969-4.06Z"/></g><path fill="#ffc149" stroke="#ffc149" stroke-linecap="square" stroke-linejoin="round" stroke-width="1.297" d="M9.48-7.568h7.742V.175H9.48Z" filter="url(#SVGtn5AbePZ)" transform="matrix(.85299 .52193 -.85299 .52193 0 0)"/><g transform="translate(.004)"><ellipse cx="12.383" cy="5.41" fill="#333" rx=".686" ry=".678"/><ellipse cx="16.692" cy="5.41" fill="#333" rx=".686" ry=".678"/></g><ellipse cx="14.542" cy="8.722" fill="#333" rx=".844" ry=".834"/></g><path fill="url(#SVGGrEjFbze)" d="M8.473 8.822a.53.53 0 0 0-.534.532v6.972c0 .022.006.041.008.063c-.026.123.035.253.189.348l.01.006a.5.5 0 0 0 .1.062l5.567 3.448a.99.99 0 0 0 .951 0l5.566-3.447a.5.5 0 0 0 .105-.066l.006-.003c.153-.095.214-.223.189-.347c.002-.021.009-.042.009-.064V9.354a.529.529 0 0 0-.803-.454l-5.547 3.447L8.739 8.9a.5.5 0 0 0-.266-.078"/></svg>

How to use the Fennec icon

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web component

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

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

HTML image

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

Fennec icon in other icon sets

Fennec icon FAQ

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

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

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

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

Browse all theSVG Color icons →