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

Name
meter-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 meter 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(#SVGHcSWxdhd202)"><path fill="#010e35" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M19.129 11.136q.05.424.051.864c0 3.976-3.214 7.2-7.18 7.2a7.18 7.18 0 0 1-6.518-4.174l1.149-.58a5.9 5.9 0 0 0 5.368 3.465c3.256 0 5.896-2.646 5.896-5.911q0-.09-.003-.181zM11.999 4.8a7.18 7.18 0 0 1 6.671 4.53l-1.229.392A5.9 5.9 0 0 0 12 6.09c-3.255 0-5.895 2.646-5.895 5.911l.002.121l-1.203.986A7 7 0 0 1 4.818 12C4.82 8.023 8.034 4.8 12 4.8" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="m4 14.879l7.023-5.76l-.291 2.395l4.099-2.329l-.208 2.274L20 9.742l-7.293 4.028l.545-2.292l-4.213 2.476l.279-1.758z" clip-rule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd202"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedMeterBackground(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(#SVGHcSWxdhd202)"><path fill="#010e35" d="M24 0H0v24h24z"/><path fill="#fff" fillRule="evenodd" d="M19.129 11.136q.05.424.051.864c0 3.976-3.214 7.2-7.18 7.2a7.18 7.18 0 0 1-6.518-4.174l1.149-.58a5.9 5.9 0 0 0 5.368 3.465c3.256 0 5.896-2.646 5.896-5.911q0-.09-.003-.181zM11.999 4.8a7.18 7.18 0 0 1 6.671 4.53l-1.229.392A5.9 5.9 0 0 0 12 6.09c-3.255 0-5.895 2.646-5.895 5.911l.002.121l-1.203.986A7 7 0 0 1 4.818 12C4.82 8.023 8.034 4.8 12 4.8" clipRule="evenodd"/><path fill="#fff" fillRule="evenodd" d="m4 14.879l7.023-5.76l-.291 2.395l4.099-2.329l-.208 2.274L20 9.742l-7.293 4.028l.545-2.292l-4.213 2.476l.279-1.758z" clipRule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd202"><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(#SVGHcSWxdhd202)"><path fill="#010e35" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M19.129 11.136q.05.424.051.864c0 3.976-3.214 7.2-7.18 7.2a7.18 7.18 0 0 1-6.518-4.174l1.149-.58a5.9 5.9 0 0 0 5.368 3.465c3.256 0 5.896-2.646 5.896-5.911q0-.09-.003-.181zM11.999 4.8a7.18 7.18 0 0 1 6.671 4.53l-1.229.392A5.9 5.9 0 0 0 12 6.09c-3.255 0-5.895 2.646-5.895 5.911l.002.121l-1.203.986A7 7 0 0 1 4.818 12C4.82 8.023 8.034 4.8 12 4.8" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="m4 14.879l7.023-5.76l-.291 2.395l4.099-2.329l-.208 2.274L20 9.742l-7.293 4.028l.545-2.292l-4.213 2.476l.279-1.758z" clip-rule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd202"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-meter-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(%23SVGHcSWxdhd202)%22%3E%3Cpath%20fill%3D%22%23010e35%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19.129%2011.136q.05.424.051.864c0%203.976-3.214%207.2-7.18%207.2a7.18%207.18%200%200%201-6.518-4.174l1.149-.58a5.9%205.9%200%200%200%205.368%203.465c3.256%200%205.896-2.646%205.896-5.911q0-.09-.003-.181zM11.999%204.8a7.18%207.18%200%200%201%206.671%204.53l-1.229.392A5.9%205.9%200%200%200%2012%206.09c-3.255%200-5.895%202.646-5.895%205.911l.002.121l-1.203.986A7%207%200%200%201%204.818%2012C4.82%208.023%208.034%204.8%2012%204.8%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22m4%2014.879l7.023-5.76l-.291%202.395l4.099-2.329l-.208%202.274L20%209.742l-7.293%204.028l.545-2.292l-4.213%202.476l.279-1.758z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd202%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(%23SVGHcSWxdhd202)%22%3E%3Cpath%20fill%3D%22%23010e35%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19.129%2011.136q.05.424.051.864c0%203.976-3.214%207.2-7.18%207.2a7.18%207.18%200%200%201-6.518-4.174l1.149-.58a5.9%205.9%200%200%200%205.368%203.465c3.256%200%205.896-2.646%205.896-5.911q0-.09-.003-.181zM11.999%204.8a7.18%207.18%200%200%201%206.671%204.53l-1.229.392A5.9%205.9%200%200%200%2012%206.09c-3.255%200-5.895%202.646-5.895%205.911l.002.121l-1.203.986A7%207%200%200%201%204.818%2012C4.82%208.023%208.034%204.8%2012%204.8%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22m4%2014.879l7.023-5.76l-.291%202.395l4.099-2.329l-.208%202.274L20%209.742l-7.293%204.028l.545-2.292l-4.213%202.476l.279-1.758z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd202%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/meter-background.svg?color=%231a73e8&size=48