zbc-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.

Name
zbc-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 zbc 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(#SVGHcSWxdhd145)"><path fill="url(#SVGUWxDhewO)" d="M24 0H0v24h24z"/><path fill="#fff" d="M4.308 13.034c-.707-.764-.111-2.009.911-1.92l13.76 1.222c.898.08 1.338 1.156.76 1.867l-2.582 3.164l-.289-.244l.285.244a1.11 1.11 0 0 1-.854.41H9.153a1.1 1.1 0 0 1-.814-.36l-4.03-4.388zm.845-1.156c-.338-.03-.534.383-.303.636l4.031 4.387a.38.38 0 0 0 .272.12h7.146a.38.38 0 0 0 .285-.134l2.587-3.169c.19-.235.044-.595-.254-.622L5.153 11.874zm1.728-4.541C7.1 6.54 7.975 6.06 8.828 6.274l8.52 2.138a1.12 1.12 0 0 1 .876 1.067v.089c0 .653-.61 1.164-1.312 1.098l-8.83-.885c-.956-.093-1.6-.951-1.365-1.822zm1.738-.352c-.427-.106-.862.134-.969.534l-.169.622c-.115.436.205.862.685.911l8.83.88c.232.022.436-.146.436-.364v-.09a.37.37 0 0 0-.293-.355L8.62 6.99z"/></g><defs><linearGradient id="SVGUWxDhewO" x1="3.993" x2="18.823" y1="9.227" y2="10.732" gradientUnits="userSpaceOnUse"><stop stop-color="#45c1cb"/><stop offset=".82" stop-color="#a274bf"/><stop offset="1" stop-color="#6a66b2"/></linearGradient><clipPath id="SVGHcSWxdhd145"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedZbcBackground(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(#SVGHcSWxdhd145)"><path fill="url(#SVGUWxDhewO)" d="M24 0H0v24h24z"/><path fill="#fff" d="M4.308 13.034c-.707-.764-.111-2.009.911-1.92l13.76 1.222c.898.08 1.338 1.156.76 1.867l-2.582 3.164l-.289-.244l.285.244a1.11 1.11 0 0 1-.854.41H9.153a1.1 1.1 0 0 1-.814-.36l-4.03-4.388zm.845-1.156c-.338-.03-.534.383-.303.636l4.031 4.387a.38.38 0 0 0 .272.12h7.146a.38.38 0 0 0 .285-.134l2.587-3.169c.19-.235.044-.595-.254-.622L5.153 11.874zm1.728-4.541C7.1 6.54 7.975 6.06 8.828 6.274l8.52 2.138a1.12 1.12 0 0 1 .876 1.067v.089c0 .653-.61 1.164-1.312 1.098l-8.83-.885c-.956-.093-1.6-.951-1.365-1.822zm1.738-.352c-.427-.106-.862.134-.969.534l-.169.622c-.115.436.205.862.685.911l8.83.88c.232.022.436-.146.436-.364v-.09a.37.37 0 0 0-.293-.355L8.62 6.99z"/></g><defs><linearGradient id="SVGUWxDhewO" x1="3.993" x2="18.823" y1="9.227" y2="10.732" gradientUnits="userSpaceOnUse"><stop stopColor="#45c1cb"/><stop offset=".82" stopColor="#a274bf"/><stop offset="1" stopColor="#6a66b2"/></linearGradient><clipPath id="SVGHcSWxdhd145"><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(#SVGHcSWxdhd145)"><path fill="url(#SVGUWxDhewO)" d="M24 0H0v24h24z"/><path fill="#fff" d="M4.308 13.034c-.707-.764-.111-2.009.911-1.92l13.76 1.222c.898.08 1.338 1.156.76 1.867l-2.582 3.164l-.289-.244l.285.244a1.11 1.11 0 0 1-.854.41H9.153a1.1 1.1 0 0 1-.814-.36l-4.03-4.388zm.845-1.156c-.338-.03-.534.383-.303.636l4.031 4.387a.38.38 0 0 0 .272.12h7.146a.38.38 0 0 0 .285-.134l2.587-3.169c.19-.235.044-.595-.254-.622L5.153 11.874zm1.728-4.541C7.1 6.54 7.975 6.06 8.828 6.274l8.52 2.138a1.12 1.12 0 0 1 .876 1.067v.089c0 .653-.61 1.164-1.312 1.098l-8.83-.885c-.956-.093-1.6-.951-1.365-1.822zm1.738-.352c-.427-.106-.862.134-.969.534l-.169.622c-.115.436.205.862.685.911l8.83.88c.232.022.436-.146.436-.364v-.09a.37.37 0 0 0-.293-.355L8.62 6.99z"/></g><defs><linearGradient id="SVGUWxDhewO" x1="3.993" x2="18.823" y1="9.227" y2="10.732" gradientUnits="userSpaceOnUse"><stop stop-color="#45c1cb"/><stop offset=".82" stop-color="#a274bf"/><stop offset="1" stop-color="#6a66b2"/></linearGradient><clipPath id="SVGHcSWxdhd145"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-zbc-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(%23SVGHcSWxdhd145)%22%3E%3Cpath%20fill%3D%22url(%23SVGUWxDhewO)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.308%2013.034c-.707-.764-.111-2.009.911-1.92l13.76%201.222c.898.08%201.338%201.156.76%201.867l-2.582%203.164l-.289-.244l.285.244a1.11%201.11%200%200%201-.854.41H9.153a1.1%201.1%200%200%201-.814-.36l-4.03-4.388zm.845-1.156c-.338-.03-.534.383-.303.636l4.031%204.387a.38.38%200%200%200%20.272.12h7.146a.38.38%200%200%200%20.285-.134l2.587-3.169c.19-.235.044-.595-.254-.622L5.153%2011.874zm1.728-4.541C7.1%206.54%207.975%206.06%208.828%206.274l8.52%202.138a1.12%201.12%200%200%201%20.876%201.067v.089c0%20.653-.61%201.164-1.312%201.098l-8.83-.885c-.956-.093-1.6-.951-1.365-1.822zm1.738-.352c-.427-.106-.862.134-.969.534l-.169.622c-.115.436.205.862.685.911l8.83.88c.232.022.436-.146.436-.364v-.09a.37.37%200%200%200-.293-.355L8.62%206.99z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGUWxDhewO%22%20x1%3D%223.993%22%20x2%3D%2218.823%22%20y1%3D%229.227%22%20y2%3D%2210.732%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2345c1cb%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23a274bf%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236a66b2%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd145%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(%23SVGHcSWxdhd145)%22%3E%3Cpath%20fill%3D%22url(%23SVGUWxDhewO)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.308%2013.034c-.707-.764-.111-2.009.911-1.92l13.76%201.222c.898.08%201.338%201.156.76%201.867l-2.582%203.164l-.289-.244l.285.244a1.11%201.11%200%200%201-.854.41H9.153a1.1%201.1%200%200%201-.814-.36l-4.03-4.388zm.845-1.156c-.338-.03-.534.383-.303.636l4.031%204.387a.38.38%200%200%200%20.272.12h7.146a.38.38%200%200%200%20.285-.134l2.587-3.169c.19-.235.044-.595-.254-.622L5.153%2011.874zm1.728-4.541C7.1%206.54%207.975%206.06%208.828%206.274l8.52%202.138a1.12%201.12%200%200%201%20.876%201.067v.089c0%20.653-.61%201.164-1.312%201.098l-8.83-.885c-.956-.093-1.6-.951-1.365-1.822zm1.738-.352c-.427-.106-.862.134-.969.534l-.169.622c-.115.436.205.862.685.911l8.83.88c.232.022.436-.146.436-.364v-.09a.37.37%200%200%200-.293-.355L8.62%206.99z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGUWxDhewO%22%20x1%3D%223.993%22%20x2%3D%2218.823%22%20y1%3D%229.227%22%20y2%3D%2210.732%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2345c1cb%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23a274bf%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236a66b2%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd145%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/zbc-background.svg?color=%231a73e8&size=48