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

Name
si-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 si 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(#SVGHcSWxdhd1)"><path fill="url(#SVGgqJ0yd6B)" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.22 12.617q-.889-.375-2.117-.523a.6.6 0 0 0-.198.014a9 9 0 0 1-1.459.283c-.988.122-1.764 0-2.338-.349a1.63 1.63 0 0 1-.791-1.242c-.104-.772.141-1.365.744-1.783a3.5 3.5 0 0 1 1.134-.5c1.063-.268 2.41-.348 4.037-.23c1.148.085 2.24.235 3.285.447c.028 0 .038.019.033.047l-.043.207q-.07.404-.155.574a.66.66 0 0 1-.414.377a.9.9 0 0 1-.367 0a21.3 21.3 0 0 0-4.442-.32a10 10 0 0 0-1.035.085q-.828.112-1.055.508a.7.7 0 0 0-.033.659q.133.296.457.48c.23.131.423.22.57.277a8.6 8.6 0 0 0 1.74.41c.08.014.16.01.231-.01a10.6 10.6 0 0 1 2.085-.324c.512-.04 1.026.04 1.5.235a1.67 1.67 0 0 1 1.031 1.082c.128.452.113.861-.051 1.243c-.165.376-.452.663-.861.875q-.629.319-1.384.447a13.7 13.7 0 0 1-2.635.174a28 28 0 0 1-4.363-.485q-.032-.006-.023-.042l.028-.16q.079-.411.165-.584a.67.67 0 0 1 .437-.367a1.5 1.5 0 0 1 .575.029c.343.066.687.113 1.035.15q1.665.171 3.346.123q.541-.016 1.082-.095q1.223-.182 1.026-1.007a.8.8 0 0 0-.32-.442a2 2 0 0 0-.457-.263"/><path fill="#fff" fill-rule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-.941a7.06 7.06 0 1 0 0-14.12a7.06 7.06 0 0 0 0 14.12" clip-rule="evenodd"/></g><defs><linearGradient id="SVGgqJ0yd6B" x1="5.892" x2="17.586" y1="6.993" y2="17.111" gradientUnits="userSpaceOnUse"><stop stop-color="#3d56c6"/><stop offset=".24" stop-color="#dc52f4"/><stop offset=".5" stop-color="#8af34e"/><stop offset="1" stop-color="#2ac4e6"/></linearGradient><clipPath id="SVGHcSWxdhd1"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedSiBackground(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(#SVGHcSWxdhd1)"><path fill="url(#SVGgqJ0yd6B)" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.22 12.617q-.889-.375-2.117-.523a.6.6 0 0 0-.198.014a9 9 0 0 1-1.459.283c-.988.122-1.764 0-2.338-.349a1.63 1.63 0 0 1-.791-1.242c-.104-.772.141-1.365.744-1.783a3.5 3.5 0 0 1 1.134-.5c1.063-.268 2.41-.348 4.037-.23c1.148.085 2.24.235 3.285.447c.028 0 .038.019.033.047l-.043.207q-.07.404-.155.574a.66.66 0 0 1-.414.377a.9.9 0 0 1-.367 0a21.3 21.3 0 0 0-4.442-.32a10 10 0 0 0-1.035.085q-.828.112-1.055.508a.7.7 0 0 0-.033.659q.133.296.457.48c.23.131.423.22.57.277a8.6 8.6 0 0 0 1.74.41c.08.014.16.01.231-.01a10.6 10.6 0 0 1 2.085-.324c.512-.04 1.026.04 1.5.235a1.67 1.67 0 0 1 1.031 1.082c.128.452.113.861-.051 1.243c-.165.376-.452.663-.861.875q-.629.319-1.384.447a13.7 13.7 0 0 1-2.635.174a28 28 0 0 1-4.363-.485q-.032-.006-.023-.042l.028-.16q.079-.411.165-.584a.67.67 0 0 1 .437-.367a1.5 1.5 0 0 1 .575.029c.343.066.687.113 1.035.15q1.665.171 3.346.123q.541-.016 1.082-.095q1.223-.182 1.026-1.007a.8.8 0 0 0-.32-.442a2 2 0 0 0-.457-.263"/><path fill="#fff" fillRule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-.941a7.06 7.06 0 1 0 0-14.12a7.06 7.06 0 0 0 0 14.12" clipRule="evenodd"/></g><defs><linearGradient id="SVGgqJ0yd6B" x1="5.892" x2="17.586" y1="6.993" y2="17.111" gradientUnits="userSpaceOnUse"><stop stopColor="#3d56c6"/><stop offset=".24" stopColor="#dc52f4"/><stop offset=".5" stopColor="#8af34e"/><stop offset="1" stopColor="#2ac4e6"/></linearGradient><clipPath id="SVGHcSWxdhd1"><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(#SVGHcSWxdhd1)"><path fill="url(#SVGgqJ0yd6B)" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.22 12.617q-.889-.375-2.117-.523a.6.6 0 0 0-.198.014a9 9 0 0 1-1.459.283c-.988.122-1.764 0-2.338-.349a1.63 1.63 0 0 1-.791-1.242c-.104-.772.141-1.365.744-1.783a3.5 3.5 0 0 1 1.134-.5c1.063-.268 2.41-.348 4.037-.23c1.148.085 2.24.235 3.285.447c.028 0 .038.019.033.047l-.043.207q-.07.404-.155.574a.66.66 0 0 1-.414.377a.9.9 0 0 1-.367 0a21.3 21.3 0 0 0-4.442-.32a10 10 0 0 0-1.035.085q-.828.112-1.055.508a.7.7 0 0 0-.033.659q.133.296.457.48c.23.131.423.22.57.277a8.6 8.6 0 0 0 1.74.41c.08.014.16.01.231-.01a10.6 10.6 0 0 1 2.085-.324c.512-.04 1.026.04 1.5.235a1.67 1.67 0 0 1 1.031 1.082c.128.452.113.861-.051 1.243c-.165.376-.452.663-.861.875q-.629.319-1.384.447a13.7 13.7 0 0 1-2.635.174a28 28 0 0 1-4.363-.485q-.032-.006-.023-.042l.028-.16q.079-.411.165-.584a.67.67 0 0 1 .437-.367a1.5 1.5 0 0 1 .575.029c.343.066.687.113 1.035.15q1.665.171 3.346.123q.541-.016 1.082-.095q1.223-.182 1.026-1.007a.8.8 0 0 0-.32-.442a2 2 0 0 0-.457-.263"/><path fill="#fff" fill-rule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-.941a7.06 7.06 0 1 0 0-14.12a7.06 7.06 0 0 0 0 14.12" clip-rule="evenodd"/></g><defs><linearGradient id="SVGgqJ0yd6B" x1="5.892" x2="17.586" y1="6.993" y2="17.111" gradientUnits="userSpaceOnUse"><stop stop-color="#3d56c6"/><stop offset=".24" stop-color="#dc52f4"/><stop offset=".5" stop-color="#8af34e"/><stop offset="1" stop-color="#2ac4e6"/></linearGradient><clipPath id="SVGHcSWxdhd1"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-si-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(%23SVGHcSWxdhd1)%22%3E%3Cpath%20fill%3D%22url(%23SVGgqJ0yd6B)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.22%2012.617q-.889-.375-2.117-.523a.6.6%200%200%200-.198.014a9%209%200%200%201-1.459.283c-.988.122-1.764%200-2.338-.349a1.63%201.63%200%200%201-.791-1.242c-.104-.772.141-1.365.744-1.783a3.5%203.5%200%200%201%201.134-.5c1.063-.268%202.41-.348%204.037-.23c1.148.085%202.24.235%203.285.447c.028%200%20.038.019.033.047l-.043.207q-.07.404-.155.574a.66.66%200%200%201-.414.377a.9.9%200%200%201-.367%200a21.3%2021.3%200%200%200-4.442-.32a10%2010%200%200%200-1.035.085q-.828.112-1.055.508a.7.7%200%200%200-.033.659q.133.296.457.48c.23.131.423.22.57.277a8.6%208.6%200%200%200%201.74.41c.08.014.16.01.231-.01a10.6%2010.6%200%200%201%202.085-.324c.512-.04%201.026.04%201.5.235a1.67%201.67%200%200%201%201.031%201.082c.128.452.113.861-.051%201.243c-.165.376-.452.663-.861.875q-.629.319-1.384.447a13.7%2013.7%200%200%201-2.635.174a28%2028%200%200%201-4.363-.485q-.032-.006-.023-.042l.028-.16q.079-.411.165-.584a.67.67%200%200%201%20.437-.367a1.5%201.5%200%200%201%20.575.029c.343.066.687.113%201.035.15q1.665.171%203.346.123q.541-.016%201.082-.095q1.223-.182%201.026-1.007a.8.8%200%200%200-.32-.442a2%202%200%200%200-.457-.263%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2020a8%208%200%201%200%200-16a8%208%200%200%200%200%2016m0-.941a7.06%207.06%200%201%200%200-14.12a7.06%207.06%200%200%200%200%2014.12%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGgqJ0yd6B%22%20x1%3D%225.892%22%20x2%3D%2217.586%22%20y1%3D%226.993%22%20y2%3D%2217.111%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233d56c6%22%2F%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23dc52f4%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%238af34e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232ac4e6%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd1%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(%23SVGHcSWxdhd1)%22%3E%3Cpath%20fill%3D%22url(%23SVGgqJ0yd6B)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.22%2012.617q-.889-.375-2.117-.523a.6.6%200%200%200-.198.014a9%209%200%200%201-1.459.283c-.988.122-1.764%200-2.338-.349a1.63%201.63%200%200%201-.791-1.242c-.104-.772.141-1.365.744-1.783a3.5%203.5%200%200%201%201.134-.5c1.063-.268%202.41-.348%204.037-.23c1.148.085%202.24.235%203.285.447c.028%200%20.038.019.033.047l-.043.207q-.07.404-.155.574a.66.66%200%200%201-.414.377a.9.9%200%200%201-.367%200a21.3%2021.3%200%200%200-4.442-.32a10%2010%200%200%200-1.035.085q-.828.112-1.055.508a.7.7%200%200%200-.033.659q.133.296.457.48c.23.131.423.22.57.277a8.6%208.6%200%200%200%201.74.41c.08.014.16.01.231-.01a10.6%2010.6%200%200%201%202.085-.324c.512-.04%201.026.04%201.5.235a1.67%201.67%200%200%201%201.031%201.082c.128.452.113.861-.051%201.243c-.165.376-.452.663-.861.875q-.629.319-1.384.447a13.7%2013.7%200%200%201-2.635.174a28%2028%200%200%201-4.363-.485q-.032-.006-.023-.042l.028-.16q.079-.411.165-.584a.67.67%200%200%201%20.437-.367a1.5%201.5%200%200%201%20.575.029c.343.066.687.113%201.035.15q1.665.171%203.346.123q.541-.016%201.082-.095q1.223-.182%201.026-1.007a.8.8%200%200%200-.32-.442a2%202%200%200%200-.457-.263%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2020a8%208%200%201%200%200-16a8%208%200%200%200%200%2016m0-.941a7.06%207.06%200%201%200%200-14.12a7.06%207.06%200%200%200%200%2014.12%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGgqJ0yd6B%22%20x1%3D%225.892%22%20x2%3D%2217.586%22%20y1%3D%226.993%22%20y2%3D%2217.111%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233d56c6%22%2F%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23dc52f4%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%238af34e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232ac4e6%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd1%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/si-background.svg?color=%231a73e8&size=48