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

Name
x2y2-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 x2y2 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(#SVGHcSWxdhd144)"><path fill="url(#SVGAUeBAe1b)" d="M24 0H0v24h24z"/><path fill="#fff" d="M18.6 7.488a6.86 6.86 0 0 0-4.849-1.985c-3.73 0-6.749 2.91-6.749 6.5s3.02 6.499 6.75 6.499c1.904 0 3.624-.76 4.849-1.985a7.998 7.998 0 1 1 0-9.034z"/><path fill="#fff" d="M13.75 18.002c3.45 0 6.25-2.685 6.25-6s-2.8-6-6.25-6c-1.614 0-3.084.59-4.194 1.55c.765-.4 1.64-.55 2.57-.55c3 0 5.374 2.07 5.374 5s-2.37 5.54-5.374 5.54q-.51 0-.99-.09c.795.35 1.68.55 2.615.55"/><path fill="#fff" fill-rule="evenodd" d="M12.25 17.002a4.749 4.749 0 1 0 .001-9.498a4.749 4.749 0 0 0 0 9.498m0-1.5a3.25 3.25 0 1 0 .001-6.499a3.25 3.25 0 0 0 0 6.499" clip-rule="evenodd"/></g><defs><linearGradient id="SVGAUeBAe1b" x1="4.003" x2="21.535" y1="12.502" y2="12.502" gradientUnits="userSpaceOnUse"><stop stop-color="#02dffc"/><stop offset="1" stop-color="#5831c9"/></linearGradient><clipPath id="SVGHcSWxdhd144"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedX2y2Background(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(#SVGHcSWxdhd144)"><path fill="url(#SVGAUeBAe1b)" d="M24 0H0v24h24z"/><path fill="#fff" d="M18.6 7.488a6.86 6.86 0 0 0-4.849-1.985c-3.73 0-6.749 2.91-6.749 6.5s3.02 6.499 6.75 6.499c1.904 0 3.624-.76 4.849-1.985a7.998 7.998 0 1 1 0-9.034z"/><path fill="#fff" d="M13.75 18.002c3.45 0 6.25-2.685 6.25-6s-2.8-6-6.25-6c-1.614 0-3.084.59-4.194 1.55c.765-.4 1.64-.55 2.57-.55c3 0 5.374 2.07 5.374 5s-2.37 5.54-5.374 5.54q-.51 0-.99-.09c.795.35 1.68.55 2.615.55"/><path fill="#fff" fillRule="evenodd" d="M12.25 17.002a4.749 4.749 0 1 0 .001-9.498a4.749 4.749 0 0 0 0 9.498m0-1.5a3.25 3.25 0 1 0 .001-6.499a3.25 3.25 0 0 0 0 6.499" clipRule="evenodd"/></g><defs><linearGradient id="SVGAUeBAe1b" x1="4.003" x2="21.535" y1="12.502" y2="12.502" gradientUnits="userSpaceOnUse"><stop stopColor="#02dffc"/><stop offset="1" stopColor="#5831c9"/></linearGradient><clipPath id="SVGHcSWxdhd144"><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(#SVGHcSWxdhd144)"><path fill="url(#SVGAUeBAe1b)" d="M24 0H0v24h24z"/><path fill="#fff" d="M18.6 7.488a6.86 6.86 0 0 0-4.849-1.985c-3.73 0-6.749 2.91-6.749 6.5s3.02 6.499 6.75 6.499c1.904 0 3.624-.76 4.849-1.985a7.998 7.998 0 1 1 0-9.034z"/><path fill="#fff" d="M13.75 18.002c3.45 0 6.25-2.685 6.25-6s-2.8-6-6.25-6c-1.614 0-3.084.59-4.194 1.55c.765-.4 1.64-.55 2.57-.55c3 0 5.374 2.07 5.374 5s-2.37 5.54-5.374 5.54q-.51 0-.99-.09c.795.35 1.68.55 2.615.55"/><path fill="#fff" fill-rule="evenodd" d="M12.25 17.002a4.749 4.749 0 1 0 .001-9.498a4.749 4.749 0 0 0 0 9.498m0-1.5a3.25 3.25 0 1 0 .001-6.499a3.25 3.25 0 0 0 0 6.499" clip-rule="evenodd"/></g><defs><linearGradient id="SVGAUeBAe1b" x1="4.003" x2="21.535" y1="12.502" y2="12.502" gradientUnits="userSpaceOnUse"><stop stop-color="#02dffc"/><stop offset="1" stop-color="#5831c9"/></linearGradient><clipPath id="SVGHcSWxdhd144"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-x2y2-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(%23SVGHcSWxdhd144)%22%3E%3Cpath%20fill%3D%22url(%23SVGAUeBAe1b)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M18.6%207.488a6.86%206.86%200%200%200-4.849-1.985c-3.73%200-6.749%202.91-6.749%206.5s3.02%206.499%206.75%206.499c1.904%200%203.624-.76%204.849-1.985a7.998%207.998%200%201%201%200-9.034z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.75%2018.002c3.45%200%206.25-2.685%206.25-6s-2.8-6-6.25-6c-1.614%200-3.084.59-4.194%201.55c.765-.4%201.64-.55%202.57-.55c3%200%205.374%202.07%205.374%205s-2.37%205.54-5.374%205.54q-.51%200-.99-.09c.795.35%201.68.55%202.615.55%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.25%2017.002a4.749%204.749%200%201%200%20.001-9.498a4.749%204.749%200%200%200%200%209.498m0-1.5a3.25%203.25%200%201%200%20.001-6.499a3.25%203.25%200%200%200%200%206.499%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGAUeBAe1b%22%20x1%3D%224.003%22%20x2%3D%2221.535%22%20y1%3D%2212.502%22%20y2%3D%2212.502%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2302dffc%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235831c9%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd144%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(%23SVGHcSWxdhd144)%22%3E%3Cpath%20fill%3D%22url(%23SVGAUeBAe1b)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M18.6%207.488a6.86%206.86%200%200%200-4.849-1.985c-3.73%200-6.749%202.91-6.749%206.5s3.02%206.499%206.75%206.499c1.904%200%203.624-.76%204.849-1.985a7.998%207.998%200%201%201%200-9.034z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.75%2018.002c3.45%200%206.25-2.685%206.25-6s-2.8-6-6.25-6c-1.614%200-3.084.59-4.194%201.55c.765-.4%201.64-.55%202.57-.55c3%200%205.374%202.07%205.374%205s-2.37%205.54-5.374%205.54q-.51%200-.99-.09c.795.35%201.68.55%202.615.55%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.25%2017.002a4.749%204.749%200%201%200%20.001-9.498a4.749%204.749%200%200%200%200%209.498m0-1.5a3.25%203.25%200%201%200%20.001-6.499a3.25%203.25%200%200%200%200%206.499%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGAUeBAe1b%22%20x1%3D%224.003%22%20x2%3D%2221.535%22%20y1%3D%2212.502%22%20y2%3D%2212.502%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2302dffc%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235831c9%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd144%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/x2y2-background.svg?color=%231a73e8&size=48