hnt logo

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

Name: hnt-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 hnt 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(#SVGHcSWxdhd24)"><path fill="#4655f6" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.839 4.885a3 3 0 0 0-.827 1.543A5.9 5.9 0 0 0 7.779 7.77a5.9 5.9 0 0 0-1.34 6.239a3.024 3.024 0 1 0 3.555 3.543a5.9 5.9 0 0 0 6.217-1.35a5.9 5.9 0 0 0 1.35-6.21a3.026 3.026 0 0 0 1.158-5.438a3.024 3.024 0 0 0-3.88.332m3.533.709a2 2 0 0 1-1.697 3.39a.3.3 0 0 0-.088 0a1.026 1.026 0 0 0-1.065 1.451a3.84 3.84 0 0 1-.768 4.31a3.84 3.84 0 0 1-4.31.767a1.025 1.025 0 0 0-1.298.376c-.12.187-.177.409-.16.631a.4.4 0 0 0 0 .102a2 2 0 0 1-.559 1.741a2 2 0 0 1-3.258-.647a2 2 0 0 1-.15-.765c0-.533.207-1.035.584-1.412a2.01 2.01 0 0 1 1.728-.564q.1.022.203.023a1.025 1.025 0 0 0 .961-.664c.095-.25.094-.537-.027-.798a3.84 3.84 0 0 1 .767-4.31a3.84 3.84 0 0 1 4.31-.767a1.02 1.02 0 0 0 1.13-.177a1.03 1.03 0 0 0 .314-.946a2 2 0 0 1 .558-1.741a2 2 0 0 1 2.825 0m-7.928 4.841a2.213 2.213 0 1 0 3.13 3.129a2.213 2.213 0 0 0-3.13-3.129"/></g><defs><clipPath id="SVGHcSWxdhd24"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedHntBackground(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(#SVGHcSWxdhd24)"><path fill="#4655f6" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.839 4.885a3 3 0 0 0-.827 1.543A5.9 5.9 0 0 0 7.779 7.77a5.9 5.9 0 0 0-1.34 6.239a3.024 3.024 0 1 0 3.555 3.543a5.9 5.9 0 0 0 6.217-1.35a5.9 5.9 0 0 0 1.35-6.21a3.026 3.026 0 0 0 1.158-5.438a3.024 3.024 0 0 0-3.88.332m3.533.709a2 2 0 0 1-1.697 3.39a.3.3 0 0 0-.088 0a1.026 1.026 0 0 0-1.065 1.451a3.84 3.84 0 0 1-.768 4.31a3.84 3.84 0 0 1-4.31.767a1.025 1.025 0 0 0-1.298.376c-.12.187-.177.409-.16.631a.4.4 0 0 0 0 .102a2 2 0 0 1-.559 1.741a2 2 0 0 1-3.258-.647a2 2 0 0 1-.15-.765c0-.533.207-1.035.584-1.412a2.01 2.01 0 0 1 1.728-.564q.1.022.203.023a1.025 1.025 0 0 0 .961-.664c.095-.25.094-.537-.027-.798a3.84 3.84 0 0 1 .767-4.31a3.84 3.84 0 0 1 4.31-.767a1.02 1.02 0 0 0 1.13-.177a1.03 1.03 0 0 0 .314-.946a2 2 0 0 1 .558-1.741a2 2 0 0 1 2.825 0m-7.928 4.841a2.213 2.213 0 1 0 3.13 3.129a2.213 2.213 0 0 0-3.13-3.129"/></g><defs><clipPath id="SVGHcSWxdhd24"><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(#SVGHcSWxdhd24)"><path fill="#4655f6" d="M24 0H0v24h24z"/><path fill="#fff" d="M14.839 4.885a3 3 0 0 0-.827 1.543A5.9 5.9 0 0 0 7.779 7.77a5.9 5.9 0 0 0-1.34 6.239a3.024 3.024 0 1 0 3.555 3.543a5.9 5.9 0 0 0 6.217-1.35a5.9 5.9 0 0 0 1.35-6.21a3.026 3.026 0 0 0 1.158-5.438a3.024 3.024 0 0 0-3.88.332m3.533.709a2 2 0 0 1-1.697 3.39a.3.3 0 0 0-.088 0a1.026 1.026 0 0 0-1.065 1.451a3.84 3.84 0 0 1-.768 4.31a3.84 3.84 0 0 1-4.31.767a1.025 1.025 0 0 0-1.298.376c-.12.187-.177.409-.16.631a.4.4 0 0 0 0 .102a2 2 0 0 1-.559 1.741a2 2 0 0 1-3.258-.647a2 2 0 0 1-.15-.765c0-.533.207-1.035.584-1.412a2.01 2.01 0 0 1 1.728-.564q.1.022.203.023a1.025 1.025 0 0 0 .961-.664c.095-.25.094-.537-.027-.798a3.84 3.84 0 0 1 .767-4.31a3.84 3.84 0 0 1 4.31-.767a1.02 1.02 0 0 0 1.13-.177a1.03 1.03 0 0 0 .314-.946a2 2 0 0 1 .558-1.741a2 2 0 0 1 2.825 0m-7.928 4.841a2.213 2.213 0 1 0 3.13 3.129a2.213 2.213 0 0 0-3.13-3.129"/></g><defs><clipPath id="SVGHcSWxdhd24"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-hnt-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(%23SVGHcSWxdhd24)%22%3E%3Cpath%20fill%3D%22%234655f6%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.839%204.885a3%203%200%200%200-.827%201.543A5.9%205.9%200%200%200%207.779%207.77a5.9%205.9%200%200%200-1.34%206.239a3.024%203.024%200%201%200%203.555%203.543a5.9%205.9%200%200%200%206.217-1.35a5.9%205.9%200%200%200%201.35-6.21a3.026%203.026%200%200%200%201.158-5.438a3.024%203.024%200%200%200-3.88.332m3.533.709a2%202%200%200%201-1.697%203.39a.3.3%200%200%200-.088%200a1.026%201.026%200%200%200-1.065%201.451a3.84%203.84%200%200%201-.768%204.31a3.84%203.84%200%200%201-4.31.767a1.025%201.025%200%200%200-1.298.376c-.12.187-.177.409-.16.631a.4.4%200%200%200%200%20.102a2%202%200%200%201-.559%201.741a2%202%200%200%201-3.258-.647a2%202%200%200%201-.15-.765c0-.533.207-1.035.584-1.412a2.01%202.01%200%200%201%201.728-.564q.1.022.203.023a1.025%201.025%200%200%200%20.961-.664c.095-.25.094-.537-.027-.798a3.84%203.84%200%200%201%20.767-4.31a3.84%203.84%200%200%201%204.31-.767a1.02%201.02%200%200%200%201.13-.177a1.03%201.03%200%200%200%20.314-.946a2%202%200%200%201%20.558-1.741a2%202%200%200%201%202.825%200m-7.928%204.841a2.213%202.213%200%201%200%203.13%203.129a2.213%202.213%200%200%200-3.13-3.129%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd24%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(%23SVGHcSWxdhd24)%22%3E%3Cpath%20fill%3D%22%234655f6%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.839%204.885a3%203%200%200%200-.827%201.543A5.9%205.9%200%200%200%207.779%207.77a5.9%205.9%200%200%200-1.34%206.239a3.024%203.024%200%201%200%203.555%203.543a5.9%205.9%200%200%200%206.217-1.35a5.9%205.9%200%200%200%201.35-6.21a3.026%203.026%200%200%200%201.158-5.438a3.024%203.024%200%200%200-3.88.332m3.533.709a2%202%200%200%201-1.697%203.39a.3.3%200%200%200-.088%200a1.026%201.026%200%200%200-1.065%201.451a3.84%203.84%200%200%201-.768%204.31a3.84%203.84%200%200%201-4.31.767a1.025%201.025%200%200%200-1.298.376c-.12.187-.177.409-.16.631a.4.4%200%200%200%200%20.102a2%202%200%200%201-.559%201.741a2%202%200%200%201-3.258-.647a2%202%200%200%201-.15-.765c0-.533.207-1.035.584-1.412a2.01%202.01%200%200%201%201.728-.564q.1.022.203.023a1.025%201.025%200%200%200%20.961-.664c.095-.25.094-.537-.027-.798a3.84%203.84%200%200%201%20.767-4.31a3.84%203.84%200%200%201%204.31-.767a1.02%201.02%200%200%200%201.13-.177a1.03%201.03%200%200%200%20.314-.946a2%202%200%200%201%20.558-1.741a2%202%200%200%201%202.825%200m-7.928%204.841a2.213%202.213%200%201%200%203.13%203.129a2.213%202.213%200%200%200-3.13-3.129%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd24%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/hnt-background.svg?color=%231a73e8&size=48