Hoppscotch icon
thesvg-color:hoppscotch
The Hoppscotch icon (thesvg-color:hoppscotch) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 748 × 500 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
- 748 × 500
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="748" height="500" viewBox="0 0 748 500"><g fill="none"><path fill="#00b381" d="M481.331 472.1c-60.011 33.411-132.958 37.478-197.829 8.596s-110.709-85.875-126.018-152.782c45.291 28.678 98.635 56.838 157.138 82.885s115.06 46.818 166.709 61.301" opacity=".6"/><path fill="url(#SVGo3Axrd4o)" d="M403.097 313.899c-7.476 16.791-30.487 22.856-51.397 13.547c-20.909-9.31-31.8-30.469-24.324-47.261c7.476-16.791 30.488-22.856 51.397-13.547c20.91 9.31 31.8 30.469 24.324 47.261"/><path fill="url(#SVGqdshachE)" d="M403.097 313.899c-7.476 16.791-30.487 22.856-51.397 13.547c-20.909-9.31-31.8-30.469-24.324-47.261c7.476-16.791 30.488-22.856 51.397-13.547c20.91 9.31 31.8 30.469 24.324 47.261"/><path fill="url(#SVGo3Axrd4o)" d="M528.347 386.39c21.89 6.277 43.722-2.883 48.761-20.458c5.04-17.576-8.62-36.912-30.511-43.189s-43.721 2.883-48.761 20.458c-5.039 17.576 8.621 36.912 30.511 43.189"/><path fill="url(#SVGqdshachE)" d="M528.347 386.39c21.89 6.277 43.722-2.883 48.761-20.458c5.04-17.576-8.62-36.912-30.511-43.189s-43.721 2.883-48.761 20.458c-5.039 17.576 8.621 36.912 30.511 43.189"/><path fill="url(#SVGo3Axrd4o)" d="M224.775 179.46c19.312 12.068 27.114 34.42 17.425 49.926s-33.199 18.292-52.511 6.225s-27.114-34.42-17.425-49.926s33.199-18.292 52.511-6.225"/><path fill="url(#SVGqdshachE)" d="M224.775 179.46c19.312 12.068 27.114 34.42 17.425 49.926s-33.199 18.292-52.511 6.225s-27.114-34.42-17.425-49.926s33.199-18.292 52.511-6.225"/><path fill="url(#SVGo3Axrd4o)" fill-rule="evenodd" d="M486.721 24.178c98.796 43.987 162.233 139.915 164.791 247.086c58.163 45.759 115.969 109.806 89.109 170.133c-43.559 97.835-248.585 48.351-426.014-30.645C137.178 331.755-36.785 212.503 6.775 114.667c26.859-60.327 113.134-60.224 186.059-47.62c81.355-69.81 195.091-86.855 293.887-42.869M57.981 137.466c-14.634 32.868 64.039 126.184 279.425 222.08c215.385 95.895 337.375 91.92 352.009 59.053c12.112-27.204-38.057-85.319-94.847-120.037c-1.739-1.063-4.164-2.569-7.201-4.455c-27.65-17.168-105.958-65.791-177.473-97.631c-21.602-9.618-30.044-35.273-20.968-55.66s29.027-34.014 71.033-35.943c19.773-.055 22.366-5.535 23.269-10.233c1.118-7.248-9.16-14.739-19.305-19.256c-82.442-36.705-183.347-21.348-253.273 52.247c-68.341-15.319-140.558-17.368-152.67 9.835" clip-rule="evenodd"/><path fill="url(#SVGqdshachE)" fill-rule="evenodd" d="M486.721 24.178c98.796 43.987 162.233 139.915 164.791 247.086c58.163 45.759 115.969 109.806 89.109 170.133c-43.559 97.835-248.585 48.351-426.014-30.645C137.178 331.755-36.785 212.503 6.775 114.667c26.859-60.327 113.134-60.224 186.059-47.62c81.355-69.81 195.091-86.855 293.887-42.869M57.981 137.466c-14.634 32.868 64.039 126.184 279.425 222.08c215.385 95.895 337.375 91.92 352.009 59.053c12.112-27.204-38.057-85.319-94.847-120.037c-1.739-1.063-4.164-2.569-7.201-4.455c-27.65-17.168-105.958-65.791-177.473-97.631c-21.602-9.618-30.044-35.273-20.968-55.66s29.027-34.014 71.033-35.943c19.773-.055 22.366-5.535 23.269-10.233c1.118-7.248-9.16-14.739-19.305-19.256c-82.442-36.705-183.347-21.348-253.273 52.247c-68.341-15.319-140.558-17.368-152.67 9.835" clip-rule="evenodd"/><defs><radialGradient id="SVGqdshachE" cx="0" cy="0" r="1" gradientTransform="rotate(191.75 374.853 100.865)scale(778.304 379.214)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="SVGo3Axrd4o" x1="373.698" x2="373.698" y1="0" y2="495.636" gradientUnits="userSpaceOnUse"><stop stop-color="#00d196"/><stop offset="1" stop-color="#00b381"/></linearGradient></defs></g></svg>How to use the Hoppscotch icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:hoppscotch" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:hoppscotch" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:hoppscotch" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--hoppscotch]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:hoppscotch"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:hoppscotch"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/hoppscotch.svg" alt="Hoppscotch icon" width="24" height="24">Hoppscotch icon in other icon sets
Hoppscotch icon FAQ
Is the Hoppscotch 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 Hoppscotch icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:hoppscotch" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Hoppscotch icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/hoppscotch.svg" alt="Hoppscotch icon">, or paste the SVG code inline to style it with CSS.