hop logo
hop-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- hop-background
- Set
- Web3 Icons Branded
- Style
- Background
- Viewbox
- 24×24
- License
- MIT
1 other variant in Web3 Icons Branded
The same logo in other sets
Use the hop logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd48)"><path fill="url(#SVGgp4kDeCZ)" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M16.37 4.402L19.715 9.3a1.6 1.6 0 0 1 .155 1.549c-.15.35-.47.6-.835.687c-.389.092-.725-.04-1.074-.179l-.162-.063h-.005v.005c.37.63.686 1.292.944 1.977c.124.327-.03.71-.358.828a.61.61 0 0 1-.743-.28s-1.214-2.009-2.193-2.95c-.87-.839-1.817-1.57-2.862-2.088a9.3 9.3 0 0 0-3.315-.914c-1.147-.102-2.314-.008-3.49.189c-.553.092-1.11-.236-1.252-.782c-.155-.59.157-1.093.768-1.324h.006c5.513-1.867 10.154 1.619 10.497 1.876l.004.003h.002l.002-.001v-.004c-.755-1.104-1.07-2.004-1.106-2.854c-.039-.933 1.149-1.34 1.674-.573M7.648 19.6l-3.362-4.925a1.6 1.6 0 0 1-.154-1.547a1.2 1.2 0 0 1 .834-.686c.388-.092.725.042 1.075.18l.161.063h.002l.002-.002l.001-.002a13 13 0 0 1-.942-1.972c-.12-.32.014-.692.327-.825a.61.61 0 0 1 .772.27s1.215 2.008 2.193 2.95c.87.838 1.817 1.57 2.862 2.087a9.3 9.3 0 0 0 3.315.914c1.148.102 2.314.01 3.49-.189c.553-.093 1.11.235 1.252.781c.153.591-.157 1.093-.768 1.323h-.006c-5.506 1.866-10.146-1.612-10.496-1.875l-.005-.003q-.006-.001-.004.005c.759 1.11 1.074 2.013 1.107 2.868c.035.933-1.13 1.355-1.656.585" clip-rule="evenodd"/></g><defs><linearGradient id="SVGgp4kDeCZ" x1="17.514" x2="6.843" y1="6.18" y2="18.183" gradientUnits="userSpaceOnUse"><stop stop-color="#e995a5"/><stop offset="1" stop-color="#be42ed"/></linearGradient><clipPath id="SVGHcSWxdhd48"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedHopBackground(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clipPath="url(#SVGHcSWxdhd48)"><path fill="url(#SVGgp4kDeCZ)" d="M24 0H0v24h24z"/><path fill="#fff" fillRule="evenodd" d="M16.37 4.402L19.715 9.3a1.6 1.6 0 0 1 .155 1.549c-.15.35-.47.6-.835.687c-.389.092-.725-.04-1.074-.179l-.162-.063h-.005v.005c.37.63.686 1.292.944 1.977c.124.327-.03.71-.358.828a.61.61 0 0 1-.743-.28s-1.214-2.009-2.193-2.95c-.87-.839-1.817-1.57-2.862-2.088a9.3 9.3 0 0 0-3.315-.914c-1.147-.102-2.314-.008-3.49.189c-.553.092-1.11-.236-1.252-.782c-.155-.59.157-1.093.768-1.324h.006c5.513-1.867 10.154 1.619 10.497 1.876l.004.003h.002l.002-.001v-.004c-.755-1.104-1.07-2.004-1.106-2.854c-.039-.933 1.149-1.34 1.674-.573M7.648 19.6l-3.362-4.925a1.6 1.6 0 0 1-.154-1.547a1.2 1.2 0 0 1 .834-.686c.388-.092.725.042 1.075.18l.161.063h.002l.002-.002l.001-.002a13 13 0 0 1-.942-1.972c-.12-.32.014-.692.327-.825a.61.61 0 0 1 .772.27s1.215 2.008 2.193 2.95c.87.838 1.817 1.57 2.862 2.087a9.3 9.3 0 0 0 3.315.914c1.148.102 2.314.01 3.49-.189c.553-.093 1.11.235 1.252.781c.153.591-.157 1.093-.768 1.323h-.006c-5.506 1.866-10.146-1.612-10.496-1.875l-.005-.003q-.006-.001-.004.005c.759 1.11 1.074 2.013 1.107 2.868c.035.933-1.13 1.355-1.656.585" clipRule="evenodd"/></g><defs><linearGradient id="SVGgp4kDeCZ" x1="17.514" x2="6.843" y1="6.18" y2="18.183" gradientUnits="userSpaceOnUse"><stop stopColor="#e995a5"/><stop offset="1" stopColor="#be42ed"/></linearGradient><clipPath id="SVGHcSWxdhd48"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd48)"><path fill="url(#SVGgp4kDeCZ)" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M16.37 4.402L19.715 9.3a1.6 1.6 0 0 1 .155 1.549c-.15.35-.47.6-.835.687c-.389.092-.725-.04-1.074-.179l-.162-.063h-.005v.005c.37.63.686 1.292.944 1.977c.124.327-.03.71-.358.828a.61.61 0 0 1-.743-.28s-1.214-2.009-2.193-2.95c-.87-.839-1.817-1.57-2.862-2.088a9.3 9.3 0 0 0-3.315-.914c-1.147-.102-2.314-.008-3.49.189c-.553.092-1.11-.236-1.252-.782c-.155-.59.157-1.093.768-1.324h.006c5.513-1.867 10.154 1.619 10.497 1.876l.004.003h.002l.002-.001v-.004c-.755-1.104-1.07-2.004-1.106-2.854c-.039-.933 1.149-1.34 1.674-.573M7.648 19.6l-3.362-4.925a1.6 1.6 0 0 1-.154-1.547a1.2 1.2 0 0 1 .834-.686c.388-.092.725.042 1.075.18l.161.063h.002l.002-.002l.001-.002a13 13 0 0 1-.942-1.972c-.12-.32.014-.692.327-.825a.61.61 0 0 1 .772.27s1.215 2.008 2.193 2.95c.87.838 1.817 1.57 2.862 2.087a9.3 9.3 0 0 0 3.315.914c1.148.102 2.314.01 3.49-.189c.553-.093 1.11.235 1.252.781c.153.591-.157 1.093-.768 1.323h-.006c-5.506 1.866-10.146-1.612-10.496-1.875l-.005-.003q-.006-.001-.004.005c.759 1.11 1.074 2.013 1.107 2.868c.035.933-1.13 1.355-1.656.585" clip-rule="evenodd"/></g><defs><linearGradient id="SVGgp4kDeCZ" x1="17.514" x2="6.843" y1="6.18" y2="18.183" gradientUnits="userSpaceOnUse"><stop stop-color="#e995a5"/><stop offset="1" stop-color="#be42ed"/></linearGradient><clipPath id="SVGHcSWxdhd48"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-hop-background {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd48)%22%3E%3Cpath%20fill%3D%22url(%23SVGgp4kDeCZ)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M16.37%204.402L19.715%209.3a1.6%201.6%200%200%201%20.155%201.549c-.15.35-.47.6-.835.687c-.389.092-.725-.04-1.074-.179l-.162-.063h-.005v.005c.37.63.686%201.292.944%201.977c.124.327-.03.71-.358.828a.61.61%200%200%201-.743-.28s-1.214-2.009-2.193-2.95c-.87-.839-1.817-1.57-2.862-2.088a9.3%209.3%200%200%200-3.315-.914c-1.147-.102-2.314-.008-3.49.189c-.553.092-1.11-.236-1.252-.782c-.155-.59.157-1.093.768-1.324h.006c5.513-1.867%2010.154%201.619%2010.497%201.876l.004.003h.002l.002-.001v-.004c-.755-1.104-1.07-2.004-1.106-2.854c-.039-.933%201.149-1.34%201.674-.573M7.648%2019.6l-3.362-4.925a1.6%201.6%200%200%201-.154-1.547a1.2%201.2%200%200%201%20.834-.686c.388-.092.725.042%201.075.18l.161.063h.002l.002-.002l.001-.002a13%2013%200%200%201-.942-1.972c-.12-.32.014-.692.327-.825a.61.61%200%200%201%20.772.27s1.215%202.008%202.193%202.95c.87.838%201.817%201.57%202.862%202.087a9.3%209.3%200%200%200%203.315.914c1.148.102%202.314.01%203.49-.189c.553-.093%201.11.235%201.252.781c.153.591-.157%201.093-.768%201.323h-.006c-5.506%201.866-10.146-1.612-10.496-1.875l-.005-.003q-.006-.001-.004.005c.759%201.11%201.074%202.013%201.107%202.868c.035.933-1.13%201.355-1.656.585%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGgp4kDeCZ%22%20x1%3D%2217.514%22%20x2%3D%226.843%22%20y1%3D%226.18%22%20y2%3D%2218.183%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e995a5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23be42ed%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd48%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd48)%22%3E%3Cpath%20fill%3D%22url(%23SVGgp4kDeCZ)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M16.37%204.402L19.715%209.3a1.6%201.6%200%200%201%20.155%201.549c-.15.35-.47.6-.835.687c-.389.092-.725-.04-1.074-.179l-.162-.063h-.005v.005c.37.63.686%201.292.944%201.977c.124.327-.03.71-.358.828a.61.61%200%200%201-.743-.28s-1.214-2.009-2.193-2.95c-.87-.839-1.817-1.57-2.862-2.088a9.3%209.3%200%200%200-3.315-.914c-1.147-.102-2.314-.008-3.49.189c-.553.092-1.11-.236-1.252-.782c-.155-.59.157-1.093.768-1.324h.006c5.513-1.867%2010.154%201.619%2010.497%201.876l.004.003h.002l.002-.001v-.004c-.755-1.104-1.07-2.004-1.106-2.854c-.039-.933%201.149-1.34%201.674-.573M7.648%2019.6l-3.362-4.925a1.6%201.6%200%200%201-.154-1.547a1.2%201.2%200%200%201%20.834-.686c.388-.092.725.042%201.075.18l.161.063h.002l.002-.002l.001-.002a13%2013%200%200%201-.942-1.972c-.12-.32.014-.692.327-.825a.61.61%200%200%201%20.772.27s1.215%202.008%202.193%202.95c.87.838%201.817%201.57%202.862%202.087a9.3%209.3%200%200%200%203.315.914c1.148.102%202.314.01%203.49-.189c.553-.093%201.11.235%201.252.781c.153.591-.157%201.093-.768%201.323h-.006c-5.506%201.866-10.146-1.612-10.496-1.875l-.005-.003q-.006-.001-.004.005c.759%201.11%201.074%202.013%201.107%202.868c.035.933-1.13%201.355-1.656.585%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGgp4kDeCZ%22%20x1%3D%2217.514%22%20x2%3D%226.843%22%20y1%3D%226.18%22%20y2%3D%2218.183%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23e995a5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23be42ed%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd48%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/token-branded/hop-background.svg?color=%231a73e8&size=48
