hook logo
hook-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- hook-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 hook 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(#SVGHcSWxdhd3)"><path fill="url(#SVGKULYMcfB)" d="M24 0H0v24h24z"/><path fill="#fff" d="M7.984 8c1.916 0 3.12 1.24 3.48 1.856l-2.856.616l.792-.616c-1.812-1.292-4.2.34-4.2 2.04c0 1.364 1.136 2.248 1.648 2.52c-1.544-.216-2.568-1.264-2.672-1.6a3.2 3.2 0 0 1-.176-.92C4 9.984 5.588 8 7.984 8m8.032 8c-1.916 0-3.12-1.24-3.48-1.856l2.856-.616l-.792.616c1.812 1.292 4.2-.34 4.2-2.04c0-1.364-1.137-2.248-1.649-2.52c1.544.216 2.568 1.264 2.672 1.6c.084.272.176.604.176.92C20 14.02 18.411 16 16.016 16"/><path fill="#fff" d="M7.028 14.572a3.48 3.48 0 0 1-2.88-1.44c.22 1.36 1.8 2.868 3.884 2.868c1.672 0 3.128-1.46 3.648-2.192l2.056-3.036c.384-.468 1.484-1.404 2.784-1.404s2.86.936 3.48 1.404c-.264-.916-1.332-2.744-3.48-2.744s-3.612 1.52-4.08 2.28c-.78 1.056-2.412 3.244-2.708 3.5c-.368.32-.72.764-2.704.764"/></g><defs><linearGradient id="SVGKULYMcfB" x1="17.35" x2="15.291" y1="8.693" y2="16.827" gradientUnits="userSpaceOnUse"><stop stop-color="#68d869"/><stop offset=".8" stop-color="#c6f88a"/></linearGradient><clipPath id="SVGHcSWxdhd3"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedHookBackground(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(#SVGHcSWxdhd3)"><path fill="url(#SVGKULYMcfB)" d="M24 0H0v24h24z"/><path fill="#fff" d="M7.984 8c1.916 0 3.12 1.24 3.48 1.856l-2.856.616l.792-.616c-1.812-1.292-4.2.34-4.2 2.04c0 1.364 1.136 2.248 1.648 2.52c-1.544-.216-2.568-1.264-2.672-1.6a3.2 3.2 0 0 1-.176-.92C4 9.984 5.588 8 7.984 8m8.032 8c-1.916 0-3.12-1.24-3.48-1.856l2.856-.616l-.792.616c1.812 1.292 4.2-.34 4.2-2.04c0-1.364-1.137-2.248-1.649-2.52c1.544.216 2.568 1.264 2.672 1.6c.084.272.176.604.176.92C20 14.02 18.411 16 16.016 16"/><path fill="#fff" d="M7.028 14.572a3.48 3.48 0 0 1-2.88-1.44c.22 1.36 1.8 2.868 3.884 2.868c1.672 0 3.128-1.46 3.648-2.192l2.056-3.036c.384-.468 1.484-1.404 2.784-1.404s2.86.936 3.48 1.404c-.264-.916-1.332-2.744-3.48-2.744s-3.612 1.52-4.08 2.28c-.78 1.056-2.412 3.244-2.708 3.5c-.368.32-.72.764-2.704.764"/></g><defs><linearGradient id="SVGKULYMcfB" x1="17.35" x2="15.291" y1="8.693" y2="16.827" gradientUnits="userSpaceOnUse"><stop stopColor="#68d869"/><stop offset=".8" stopColor="#c6f88a"/></linearGradient><clipPath id="SVGHcSWxdhd3"><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(#SVGHcSWxdhd3)"><path fill="url(#SVGKULYMcfB)" d="M24 0H0v24h24z"/><path fill="#fff" d="M7.984 8c1.916 0 3.12 1.24 3.48 1.856l-2.856.616l.792-.616c-1.812-1.292-4.2.34-4.2 2.04c0 1.364 1.136 2.248 1.648 2.52c-1.544-.216-2.568-1.264-2.672-1.6a3.2 3.2 0 0 1-.176-.92C4 9.984 5.588 8 7.984 8m8.032 8c-1.916 0-3.12-1.24-3.48-1.856l2.856-.616l-.792.616c1.812 1.292 4.2-.34 4.2-2.04c0-1.364-1.137-2.248-1.649-2.52c1.544.216 2.568 1.264 2.672 1.6c.084.272.176.604.176.92C20 14.02 18.411 16 16.016 16"/><path fill="#fff" d="M7.028 14.572a3.48 3.48 0 0 1-2.88-1.44c.22 1.36 1.8 2.868 3.884 2.868c1.672 0 3.128-1.46 3.648-2.192l2.056-3.036c.384-.468 1.484-1.404 2.784-1.404s2.86.936 3.48 1.404c-.264-.916-1.332-2.744-3.48-2.744s-3.612 1.52-4.08 2.28c-.78 1.056-2.412 3.244-2.708 3.5c-.368.32-.72.764-2.704.764"/></g><defs><linearGradient id="SVGKULYMcfB" x1="17.35" x2="15.291" y1="8.693" y2="16.827" gradientUnits="userSpaceOnUse"><stop stop-color="#68d869"/><stop offset=".8" stop-color="#c6f88a"/></linearGradient><clipPath id="SVGHcSWxdhd3"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-hook-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(%23SVGHcSWxdhd3)%22%3E%3Cpath%20fill%3D%22url(%23SVGKULYMcfB)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M7.984%208c1.916%200%203.12%201.24%203.48%201.856l-2.856.616l.792-.616c-1.812-1.292-4.2.34-4.2%202.04c0%201.364%201.136%202.248%201.648%202.52c-1.544-.216-2.568-1.264-2.672-1.6a3.2%203.2%200%200%201-.176-.92C4%209.984%205.588%208%207.984%208m8.032%208c-1.916%200-3.12-1.24-3.48-1.856l2.856-.616l-.792.616c1.812%201.292%204.2-.34%204.2-2.04c0-1.364-1.137-2.248-1.649-2.52c1.544.216%202.568%201.264%202.672%201.6c.084.272.176.604.176.92C20%2014.02%2018.411%2016%2016.016%2016%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M7.028%2014.572a3.48%203.48%200%200%201-2.88-1.44c.22%201.36%201.8%202.868%203.884%202.868c1.672%200%203.128-1.46%203.648-2.192l2.056-3.036c.384-.468%201.484-1.404%202.784-1.404s2.86.936%203.48%201.404c-.264-.916-1.332-2.744-3.48-2.744s-3.612%201.52-4.08%202.28c-.78%201.056-2.412%203.244-2.708%203.5c-.368.32-.72.764-2.704.764%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGKULYMcfB%22%20x1%3D%2217.35%22%20x2%3D%2215.291%22%20y1%3D%228.693%22%20y2%3D%2216.827%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2368d869%22%2F%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22%23c6f88a%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd3%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(%23SVGHcSWxdhd3)%22%3E%3Cpath%20fill%3D%22url(%23SVGKULYMcfB)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M7.984%208c1.916%200%203.12%201.24%203.48%201.856l-2.856.616l.792-.616c-1.812-1.292-4.2.34-4.2%202.04c0%201.364%201.136%202.248%201.648%202.52c-1.544-.216-2.568-1.264-2.672-1.6a3.2%203.2%200%200%201-.176-.92C4%209.984%205.588%208%207.984%208m8.032%208c-1.916%200-3.12-1.24-3.48-1.856l2.856-.616l-.792.616c1.812%201.292%204.2-.34%204.2-2.04c0-1.364-1.137-2.248-1.649-2.52c1.544.216%202.568%201.264%202.672%201.6c.084.272.176.604.176.92C20%2014.02%2018.411%2016%2016.016%2016%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M7.028%2014.572a3.48%203.48%200%200%201-2.88-1.44c.22%201.36%201.8%202.868%203.884%202.868c1.672%200%203.128-1.46%203.648-2.192l2.056-3.036c.384-.468%201.484-1.404%202.784-1.404s2.86.936%203.48%201.404c-.264-.916-1.332-2.744-3.48-2.744s-3.612%201.52-4.08%202.28c-.78%201.056-2.412%203.244-2.708%203.5c-.368.32-.72.764-2.704.764%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGKULYMcfB%22%20x1%3D%2217.35%22%20x2%3D%2215.291%22%20y1%3D%228.693%22%20y2%3D%2216.827%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2368d869%22%2F%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22%23c6f88a%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd3%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/hook-background.svg?color=%231a73e8&size=48
