astar logo

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

Name: astar-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 astar 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(#SVGHcSWxdhd205)"><path fill="url(#SVGnFdNQe0Q)" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1.804a6.196 6.196 0 1 0 0-12.393a6.196 6.196 0 0 0 0 12.393" clip-rule="evenodd"/><path fill="#fff" d="M14.745 16.802a1.355 1.355 0 1 0 0-2.71a1.355 1.355 0 0 0 0 2.71"/><path fill="#fff" d="M13.934 4.31c1.304.093 2.845 1.24 3.453 1.803l.776.834c-1.416-.66-2.657-1.396-4.229-1.357c-1.57.038-3.588 1.629-3.433 4.597c.155 2.967 2.444 4.577 4.093 5.12c1.319.435 1.453-.162 1.336-.525c.532 1.035-.172 2.058-1.336 2.155c-.931.077-2.147-.602-2.638-.95c-1.319-.925-3.817-3.6-3.259-6.906c.699-4.131 3.608-4.888 5.237-4.772"/><path fill="#fff" d="M6.407 12.118A1.367 1.367 0 1 0 8.81 13.42a1.367 1.367 0 0 0-2.403-1.302"/><path fill="#fff" d="M17.802 17.36c-.703 1.101-2.45 1.954-3.235 2.22l-1.103.285c1.255-.931 2.498-1.716 3.213-3.116s.277-3.93-2.406-5.208s-5.19-.033-6.452 1.158c-1.01.953-.538 1.36-.165 1.43c-1.143 0-1.737-1.137-1.268-2.206c.376-.856 1.552-1.601 2.093-1.867c1.441-.719 4.984-1.64 7.624.425c3.3 2.583 2.578 5.501 1.7 6.878"/><path fill="#fff" d="M14.748 7.182a1.366 1.366 0 1 0-2.343 1.407a1.366 1.366 0 0 0 2.343-1.407"/><path fill="#fff" d="M4.443 14.333c-.592-1.165-.471-3.106-.302-3.916l.315-1.095c.164 1.554.242 3.025 1.084 4.352s3.245 2.237 5.709.575c2.464-1.66 2.665-4.452 2.281-6.145c-.306-1.354-.914-1.141-1.165-.855c.598-1.038 1.88-.932 2.562.016c.546.758.59 2.15.544 2.75c-.113 1.608-1.12 5.127-4.241 6.35c-3.901 1.529-6.048-.575-6.787-2.032"/></g><defs><linearGradient id="SVGnFdNQe0Q" x1="18.003" x2="6.498" y1="6.991" y2="17.893" gradientUnits="userSpaceOnUse"><stop stop-color="#0ae2ff"/><stop offset=".189" stop-color="#047da5"/><stop offset=".278" stop-color="#0279c2"/><stop offset=".42" stop-color="#018af6"/><stop offset=".553" stop-color="#0076ed"/><stop offset=".744" stop-color="#4350d3"/><stop offset=".873" stop-color="#910659"/><stop offset="1" stop-color="#cb006d"/></linearGradient><clipPath id="SVGHcSWxdhd205"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedAstarBackground(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(#SVGHcSWxdhd205)"><path fill="url(#SVGnFdNQe0Q)" d="M24 0H0v24h24z"/><path fill="#fff" fillRule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1.804a6.196 6.196 0 1 0 0-12.393a6.196 6.196 0 0 0 0 12.393" clipRule="evenodd"/><path fill="#fff" d="M14.745 16.802a1.355 1.355 0 1 0 0-2.71a1.355 1.355 0 0 0 0 2.71"/><path fill="#fff" d="M13.934 4.31c1.304.093 2.845 1.24 3.453 1.803l.776.834c-1.416-.66-2.657-1.396-4.229-1.357c-1.57.038-3.588 1.629-3.433 4.597c.155 2.967 2.444 4.577 4.093 5.12c1.319.435 1.453-.162 1.336-.525c.532 1.035-.172 2.058-1.336 2.155c-.931.077-2.147-.602-2.638-.95c-1.319-.925-3.817-3.6-3.259-6.906c.699-4.131 3.608-4.888 5.237-4.772"/><path fill="#fff" d="M6.407 12.118A1.367 1.367 0 1 0 8.81 13.42a1.367 1.367 0 0 0-2.403-1.302"/><path fill="#fff" d="M17.802 17.36c-.703 1.101-2.45 1.954-3.235 2.22l-1.103.285c1.255-.931 2.498-1.716 3.213-3.116s.277-3.93-2.406-5.208s-5.19-.033-6.452 1.158c-1.01.953-.538 1.36-.165 1.43c-1.143 0-1.737-1.137-1.268-2.206c.376-.856 1.552-1.601 2.093-1.867c1.441-.719 4.984-1.64 7.624.425c3.3 2.583 2.578 5.501 1.7 6.878"/><path fill="#fff" d="M14.748 7.182a1.366 1.366 0 1 0-2.343 1.407a1.366 1.366 0 0 0 2.343-1.407"/><path fill="#fff" d="M4.443 14.333c-.592-1.165-.471-3.106-.302-3.916l.315-1.095c.164 1.554.242 3.025 1.084 4.352s3.245 2.237 5.709.575c2.464-1.66 2.665-4.452 2.281-6.145c-.306-1.354-.914-1.141-1.165-.855c.598-1.038 1.88-.932 2.562.016c.546.758.59 2.15.544 2.75c-.113 1.608-1.12 5.127-4.241 6.35c-3.901 1.529-6.048-.575-6.787-2.032"/></g><defs><linearGradient id="SVGnFdNQe0Q" x1="18.003" x2="6.498" y1="6.991" y2="17.893" gradientUnits="userSpaceOnUse"><stop stopColor="#0ae2ff"/><stop offset=".189" stopColor="#047da5"/><stop offset=".278" stopColor="#0279c2"/><stop offset=".42" stopColor="#018af6"/><stop offset=".553" stopColor="#0076ed"/><stop offset=".744" stopColor="#4350d3"/><stop offset=".873" stopColor="#910659"/><stop offset="1" stopColor="#cb006d"/></linearGradient><clipPath id="SVGHcSWxdhd205"><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(#SVGHcSWxdhd205)"><path fill="url(#SVGnFdNQe0Q)" d="M24 0H0v24h24z"/><path fill="#fff" fill-rule="evenodd" d="M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1.804a6.196 6.196 0 1 0 0-12.393a6.196 6.196 0 0 0 0 12.393" clip-rule="evenodd"/><path fill="#fff" d="M14.745 16.802a1.355 1.355 0 1 0 0-2.71a1.355 1.355 0 0 0 0 2.71"/><path fill="#fff" d="M13.934 4.31c1.304.093 2.845 1.24 3.453 1.803l.776.834c-1.416-.66-2.657-1.396-4.229-1.357c-1.57.038-3.588 1.629-3.433 4.597c.155 2.967 2.444 4.577 4.093 5.12c1.319.435 1.453-.162 1.336-.525c.532 1.035-.172 2.058-1.336 2.155c-.931.077-2.147-.602-2.638-.95c-1.319-.925-3.817-3.6-3.259-6.906c.699-4.131 3.608-4.888 5.237-4.772"/><path fill="#fff" d="M6.407 12.118A1.367 1.367 0 1 0 8.81 13.42a1.367 1.367 0 0 0-2.403-1.302"/><path fill="#fff" d="M17.802 17.36c-.703 1.101-2.45 1.954-3.235 2.22l-1.103.285c1.255-.931 2.498-1.716 3.213-3.116s.277-3.93-2.406-5.208s-5.19-.033-6.452 1.158c-1.01.953-.538 1.36-.165 1.43c-1.143 0-1.737-1.137-1.268-2.206c.376-.856 1.552-1.601 2.093-1.867c1.441-.719 4.984-1.64 7.624.425c3.3 2.583 2.578 5.501 1.7 6.878"/><path fill="#fff" d="M14.748 7.182a1.366 1.366 0 1 0-2.343 1.407a1.366 1.366 0 0 0 2.343-1.407"/><path fill="#fff" d="M4.443 14.333c-.592-1.165-.471-3.106-.302-3.916l.315-1.095c.164 1.554.242 3.025 1.084 4.352s3.245 2.237 5.709.575c2.464-1.66 2.665-4.452 2.281-6.145c-.306-1.354-.914-1.141-1.165-.855c.598-1.038 1.88-.932 2.562.016c.546.758.59 2.15.544 2.75c-.113 1.608-1.12 5.127-4.241 6.35c-3.901 1.529-6.048-.575-6.787-2.032"/></g><defs><linearGradient id="SVGnFdNQe0Q" x1="18.003" x2="6.498" y1="6.991" y2="17.893" gradientUnits="userSpaceOnUse"><stop stop-color="#0ae2ff"/><stop offset=".189" stop-color="#047da5"/><stop offset=".278" stop-color="#0279c2"/><stop offset=".42" stop-color="#018af6"/><stop offset=".553" stop-color="#0076ed"/><stop offset=".744" stop-color="#4350d3"/><stop offset=".873" stop-color="#910659"/><stop offset="1" stop-color="#cb006d"/></linearGradient><clipPath id="SVGHcSWxdhd205"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
</template>

CSS

.icon-astar-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(%23SVGHcSWxdhd205)%22%3E%3Cpath%20fill%3D%22url(%23SVGnFdNQe0Q)%22%20d%3D%22M24%200H0v24h24z%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-1.804a6.196%206.196%200%201%200%200-12.393a6.196%206.196%200%200%200%200%2012.393%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.745%2016.802a1.355%201.355%200%201%200%200-2.71a1.355%201.355%200%200%200%200%202.71%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.934%204.31c1.304.093%202.845%201.24%203.453%201.803l.776.834c-1.416-.66-2.657-1.396-4.229-1.357c-1.57.038-3.588%201.629-3.433%204.597c.155%202.967%202.444%204.577%204.093%205.12c1.319.435%201.453-.162%201.336-.525c.532%201.035-.172%202.058-1.336%202.155c-.931.077-2.147-.602-2.638-.95c-1.319-.925-3.817-3.6-3.259-6.906c.699-4.131%203.608-4.888%205.237-4.772%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.407%2012.118A1.367%201.367%200%201%200%208.81%2013.42a1.367%201.367%200%200%200-2.403-1.302%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M17.802%2017.36c-.703%201.101-2.45%201.954-3.235%202.22l-1.103.285c1.255-.931%202.498-1.716%203.213-3.116s.277-3.93-2.406-5.208s-5.19-.033-6.452%201.158c-1.01.953-.538%201.36-.165%201.43c-1.143%200-1.737-1.137-1.268-2.206c.376-.856%201.552-1.601%202.093-1.867c1.441-.719%204.984-1.64%207.624.425c3.3%202.583%202.578%205.501%201.7%206.878%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.748%207.182a1.366%201.366%200%201%200-2.343%201.407a1.366%201.366%200%200%200%202.343-1.407%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.443%2014.333c-.592-1.165-.471-3.106-.302-3.916l.315-1.095c.164%201.554.242%203.025%201.084%204.352s3.245%202.237%205.709.575c2.464-1.66%202.665-4.452%202.281-6.145c-.306-1.354-.914-1.141-1.165-.855c.598-1.038%201.88-.932%202.562.016c.546.758.59%202.15.544%202.75c-.113%201.608-1.12%205.127-4.241%206.35c-3.901%201.529-6.048-.575-6.787-2.032%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGnFdNQe0Q%22%20x1%3D%2218.003%22%20x2%3D%226.498%22%20y1%3D%226.991%22%20y2%3D%2217.893%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230ae2ff%22%2F%3E%3Cstop%20offset%3D%22.189%22%20stop-color%3D%22%23047da5%22%2F%3E%3Cstop%20offset%3D%22.278%22%20stop-color%3D%22%230279c2%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23018af6%22%2F%3E%3Cstop%20offset%3D%22.553%22%20stop-color%3D%22%230076ed%22%2F%3E%3Cstop%20offset%3D%22.744%22%20stop-color%3D%22%234350d3%22%2F%3E%3Cstop%20offset%3D%22.873%22%20stop-color%3D%22%23910659%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cb006d%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd205%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(%23SVGHcSWxdhd205)%22%3E%3Cpath%20fill%3D%22url(%23SVGnFdNQe0Q)%22%20d%3D%22M24%200H0v24h24z%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-1.804a6.196%206.196%200%201%200%200-12.393a6.196%206.196%200%200%200%200%2012.393%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.745%2016.802a1.355%201.355%200%201%200%200-2.71a1.355%201.355%200%200%200%200%202.71%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.934%204.31c1.304.093%202.845%201.24%203.453%201.803l.776.834c-1.416-.66-2.657-1.396-4.229-1.357c-1.57.038-3.588%201.629-3.433%204.597c.155%202.967%202.444%204.577%204.093%205.12c1.319.435%201.453-.162%201.336-.525c.532%201.035-.172%202.058-1.336%202.155c-.931.077-2.147-.602-2.638-.95c-1.319-.925-3.817-3.6-3.259-6.906c.699-4.131%203.608-4.888%205.237-4.772%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.407%2012.118A1.367%201.367%200%201%200%208.81%2013.42a1.367%201.367%200%200%200-2.403-1.302%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M17.802%2017.36c-.703%201.101-2.45%201.954-3.235%202.22l-1.103.285c1.255-.931%202.498-1.716%203.213-3.116s.277-3.93-2.406-5.208s-5.19-.033-6.452%201.158c-1.01.953-.538%201.36-.165%201.43c-1.143%200-1.737-1.137-1.268-2.206c.376-.856%201.552-1.601%202.093-1.867c1.441-.719%204.984-1.64%207.624.425c3.3%202.583%202.578%205.501%201.7%206.878%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M14.748%207.182a1.366%201.366%200%201%200-2.343%201.407a1.366%201.366%200%200%200%202.343-1.407%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.443%2014.333c-.592-1.165-.471-3.106-.302-3.916l.315-1.095c.164%201.554.242%203.025%201.084%204.352s3.245%202.237%205.709.575c2.464-1.66%202.665-4.452%202.281-6.145c-.306-1.354-.914-1.141-1.165-.855c.598-1.038%201.88-.932%202.562.016c.546.758.59%202.15.544%202.75c-.113%201.608-1.12%205.127-4.241%206.35c-3.901%201.529-6.048-.575-6.787-2.032%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGnFdNQe0Q%22%20x1%3D%2218.003%22%20x2%3D%226.498%22%20y1%3D%226.991%22%20y2%3D%2217.893%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230ae2ff%22%2F%3E%3Cstop%20offset%3D%22.189%22%20stop-color%3D%22%23047da5%22%2F%3E%3Cstop%20offset%3D%22.278%22%20stop-color%3D%22%230279c2%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23018af6%22%2F%3E%3Cstop%20offset%3D%22.553%22%20stop-color%3D%22%230076ed%22%2F%3E%3Cstop%20offset%3D%22.744%22%20stop-color%3D%22%234350d3%22%2F%3E%3Cstop%20offset%3D%22.873%22%20stop-color%3D%22%23910659%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cb006d%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd205%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/astar-background.svg?color=%231a73e8&size=48