gram logo
gram-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- gram-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 gram 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(#SVGHcSWxdhd200)"><path fill="#30a1f5" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M14.74 5.5H9.257c-.73 0-1.094 0-1.424.098c-.292.087-.563.23-.798.42c-.264.214-.46.51-.856 1.1l-1.74 2.61c-.26.39-.391.584-.426.79a1 1 0 0 0 .06.538c.08.194.25.358.591.686l6.472 6.232c.303.29.454.435.627.49a.8.8 0 0 0 .471 0c.175-.055.325-.2.627-.49l6.473-6.232c.34-.328.51-.492.591-.686a1 1 0 0 0 .06-.538c-.036-.206-.166-.4-.427-.79l-1.743-2.61c-.394-.591-.593-.887-.857-1.1a2.3 2.3 0 0 0-.797-.42c-.33-.097-.694-.097-1.424-.097M13.7 7.559a.27.27 0 0 1 .101-.127a.28.28 0 0 1 .316 0a.27.27 0 0 1 .101.127l.616 1.6a.36.36 0 0 0 .215.208l1.663.592a.3.3 0 0 1 .131.098a.26.26 0 0 1 0 .304a.3.3 0 0 1-.13.098l-1.664.592a.37.37 0 0 0-.215.208l-.616 1.6a.27.27 0 0 1-.1.127a.28.28 0 0 1-.317 0a.27.27 0 0 1-.101-.126l-.615-1.601a.35.35 0 0 0-.216-.208l-1.663-.592a.3.3 0 0 1-.13-.098a.26.26 0 0 1 0-.304a.3.3 0 0 1 .13-.098l1.663-.592a.37.37 0 0 0 .216-.208z" clip-rule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd200"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedGramBackground(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(#SVGHcSWxdhd200)"><path fill="#30a1f5" d="M24 0H0v24h24z"/><path fill="#fff" fillRule="evenodd" d="M14.74 5.5H9.257c-.73 0-1.094 0-1.424.098c-.292.087-.563.23-.798.42c-.264.214-.46.51-.856 1.1l-1.74 2.61c-.26.39-.391.584-.426.79a1 1 0 0 0 .06.538c.08.194.25.358.591.686l6.472 6.232c.303.29.454.435.627.49a.8.8 0 0 0 .471 0c.175-.055.325-.2.627-.49l6.473-6.232c.34-.328.51-.492.591-.686a1 1 0 0 0 .06-.538c-.036-.206-.166-.4-.427-.79l-1.743-2.61c-.394-.591-.593-.887-.857-1.1a2.3 2.3 0 0 0-.797-.42c-.33-.097-.694-.097-1.424-.097M13.7 7.559a.27.27 0 0 1 .101-.127a.28.28 0 0 1 .316 0a.27.27 0 0 1 .101.127l.616 1.6a.36.36 0 0 0 .215.208l1.663.592a.3.3 0 0 1 .131.098a.26.26 0 0 1 0 .304a.3.3 0 0 1-.13.098l-1.664.592a.37.37 0 0 0-.215.208l-.616 1.6a.27.27 0 0 1-.1.127a.28.28 0 0 1-.317 0a.27.27 0 0 1-.101-.126l-.615-1.601a.35.35 0 0 0-.216-.208l-1.663-.592a.3.3 0 0 1-.13-.098a.26.26 0 0 1 0-.304a.3.3 0 0 1 .13-.098l1.663-.592a.37.37 0 0 0 .216-.208z" clipRule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd200"><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(#SVGHcSWxdhd200)"><path fill="#30a1f5" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M14.74 5.5H9.257c-.73 0-1.094 0-1.424.098c-.292.087-.563.23-.798.42c-.264.214-.46.51-.856 1.1l-1.74 2.61c-.26.39-.391.584-.426.79a1 1 0 0 0 .06.538c.08.194.25.358.591.686l6.472 6.232c.303.29.454.435.627.49a.8.8 0 0 0 .471 0c.175-.055.325-.2.627-.49l6.473-6.232c.34-.328.51-.492.591-.686a1 1 0 0 0 .06-.538c-.036-.206-.166-.4-.427-.79l-1.743-2.61c-.394-.591-.593-.887-.857-1.1a2.3 2.3 0 0 0-.797-.42c-.33-.097-.694-.097-1.424-.097M13.7 7.559a.27.27 0 0 1 .101-.127a.28.28 0 0 1 .316 0a.27.27 0 0 1 .101.127l.616 1.6a.36.36 0 0 0 .215.208l1.663.592a.3.3 0 0 1 .131.098a.26.26 0 0 1 0 .304a.3.3 0 0 1-.13.098l-1.664.592a.37.37 0 0 0-.215.208l-.616 1.6a.27.27 0 0 1-.1.127a.28.28 0 0 1-.317 0a.27.27 0 0 1-.101-.126l-.615-1.601a.35.35 0 0 0-.216-.208l-1.663-.592a.3.3 0 0 1-.13-.098a.26.26 0 0 1 0-.304a.3.3 0 0 1 .13-.098l1.663-.592a.37.37 0 0 0 .216-.208z" clip-rule="evenodd"/></g><defs><clipPath id="SVGHcSWxdhd200"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-gram-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(%23SVGHcSWxdhd200)%22%3E%3Cpath%20fill%3D%22%2330a1f5%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M14.74%205.5H9.257c-.73%200-1.094%200-1.424.098c-.292.087-.563.23-.798.42c-.264.214-.46.51-.856%201.1l-1.74%202.61c-.26.39-.391.584-.426.79a1%201%200%200%200%20.06.538c.08.194.25.358.591.686l6.472%206.232c.303.29.454.435.627.49a.8.8%200%200%200%20.471%200c.175-.055.325-.2.627-.49l6.473-6.232c.34-.328.51-.492.591-.686a1%201%200%200%200%20.06-.538c-.036-.206-.166-.4-.427-.79l-1.743-2.61c-.394-.591-.593-.887-.857-1.1a2.3%202.3%200%200%200-.797-.42c-.33-.097-.694-.097-1.424-.097M13.7%207.559a.27.27%200%200%201%20.101-.127a.28.28%200%200%201%20.316%200a.27.27%200%200%201%20.101.127l.616%201.6a.36.36%200%200%200%20.215.208l1.663.592a.3.3%200%200%201%20.131.098a.26.26%200%200%201%200%20.304a.3.3%200%200%201-.13.098l-1.664.592a.37.37%200%200%200-.215.208l-.616%201.6a.27.27%200%200%201-.1.127a.28.28%200%200%201-.317%200a.27.27%200%200%201-.101-.126l-.615-1.601a.35.35%200%200%200-.216-.208l-1.663-.592a.3.3%200%200%201-.13-.098a.26.26%200%200%201%200-.304a.3.3%200%200%201%20.13-.098l1.663-.592a.37.37%200%200%200%20.216-.208z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd200%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(%23SVGHcSWxdhd200)%22%3E%3Cpath%20fill%3D%22%2330a1f5%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M14.74%205.5H9.257c-.73%200-1.094%200-1.424.098c-.292.087-.563.23-.798.42c-.264.214-.46.51-.856%201.1l-1.74%202.61c-.26.39-.391.584-.426.79a1%201%200%200%200%20.06.538c.08.194.25.358.591.686l6.472%206.232c.303.29.454.435.627.49a.8.8%200%200%200%20.471%200c.175-.055.325-.2.627-.49l6.473-6.232c.34-.328.51-.492.591-.686a1%201%200%200%200%20.06-.538c-.036-.206-.166-.4-.427-.79l-1.743-2.61c-.394-.591-.593-.887-.857-1.1a2.3%202.3%200%200%200-.797-.42c-.33-.097-.694-.097-1.424-.097M13.7%207.559a.27.27%200%200%201%20.101-.127a.28.28%200%200%201%20.316%200a.27.27%200%200%201%20.101.127l.616%201.6a.36.36%200%200%200%20.215.208l1.663.592a.3.3%200%200%201%20.131.098a.26.26%200%200%201%200%20.304a.3.3%200%200%201-.13.098l-1.664.592a.37.37%200%200%200-.215.208l-.616%201.6a.27.27%200%200%201-.1.127a.28.28%200%200%201-.317%200a.27.27%200%200%201-.101-.126l-.615-1.601a.35.35%200%200%200-.216-.208l-1.663-.592a.3.3%200%200%201-.13-.098a.26.26%200%200%201%200-.304a.3.3%200%200%201%20.13-.098l1.663-.592a.37.37%200%200%200%20.216-.208z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd200%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/gram-background.svg?color=%231a73e8&size=48
