asto logo
asto from Web3 Icons Branded by 0xa3k5 · Branded · MIT Free for personal and commercial use.
- Name
- asto
- Set
- Web3 Icons Branded
- Style
- Branded
- Viewbox
- 24×24
- License
- MIT
Use the asto logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><mask id="tokenBrandedAsto" width="20" height="20" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M22 2H2v20h20z"/></mask><g fill="none"><g mask="url(#tokenBrandedAsto)"><path fill="#1E1E20" d="M2 2h20v20H2z"/><path fill="url(#tokenBrandedAsto1)" d="M9.428 16.396a5.1 5.1 0 0 1 2.31-.493c.472 0 1.35.025 2.311.493c.911.443 3.143.536 3.143-1.939c0-1.057-.485-2.436-1.153-3.75c-.668-1.321-2.44-4.421-4.3-4.421c-1.857 0-3.629 3.103-4.3 4.421c-.668 1.314-1.154 2.693-1.154 3.75c0 2.475 2.236 2.382 3.143 1.94"/><path fill="url(#tokenBrandedAsto2)" d="M14.322 14.143a3.393 3.393 0 1 0 0-6.786a3.393 3.393 0 0 0 0 6.786"/><path fill="url(#tokenBrandedAsto3)" d="M13.8 7.396a3.393 3.393 0 1 0 3.14 5.515a13 13 0 0 0-.9-2.204c-.411-.81-1.232-2.286-2.24-3.31"/></g><defs><linearGradient id="tokenBrandedAsto1" x1="11.999" x2="11.999" y1="6.286" y2="16.643" gradientUnits="userSpaceOnUse"><stop stop-color="#7F70FD"/><stop offset=".53" stop-color="#6551F1"/><stop offset="1" stop-color="#846DF8"/></linearGradient><linearGradient id="tokenBrandedAsto2" x1="12.301" x2="14.296" y1="6.286" y2="15.369" gradientUnits="userSpaceOnUse"><stop stop-color="#F4C9EA"/><stop offset="1" stop-color="#E995AE"/></linearGradient><linearGradient id="tokenBrandedAsto3" x1="13.918" x2="15.036" y1="7.454" y2="13.607" gradientUnits="userSpaceOnUse"><stop stop-color="#F9DBFF"/><stop offset=".57" stop-color="#ED9FF9"/><stop offset="1" stop-color="#F3BBFB"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedAsto(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><mask id="tokenBrandedAsto" width="20" height="20" x="2" y="2" maskUnits="userSpaceOnUse" style="maskType:luminance"><path fill="#fff" d="M22 2H2v20h20z"/></mask><g fill="none"><g mask="url(#tokenBrandedAsto)"><path fill="#1E1E20" d="M2 2h20v20H2z"/><path fill="url(#tokenBrandedAsto1)" d="M9.428 16.396a5.1 5.1 0 0 1 2.31-.493c.472 0 1.35.025 2.311.493c.911.443 3.143.536 3.143-1.939c0-1.057-.485-2.436-1.153-3.75c-.668-1.321-2.44-4.421-4.3-4.421c-1.857 0-3.629 3.103-4.3 4.421c-.668 1.314-1.154 2.693-1.154 3.75c0 2.475 2.236 2.382 3.143 1.94"/><path fill="url(#tokenBrandedAsto2)" d="M14.322 14.143a3.393 3.393 0 1 0 0-6.786a3.393 3.393 0 0 0 0 6.786"/><path fill="url(#tokenBrandedAsto3)" d="M13.8 7.396a3.393 3.393 0 1 0 3.14 5.515a13 13 0 0 0-.9-2.204c-.411-.81-1.232-2.286-2.24-3.31"/></g><defs><linearGradient id="tokenBrandedAsto1" x1="11.999" x2="11.999" y1="6.286" y2="16.643" gradientUnits="userSpaceOnUse"><stop stopColor="#7F70FD"/><stop offset=".53" stopColor="#6551F1"/><stop offset="1" stopColor="#846DF8"/></linearGradient><linearGradient id="tokenBrandedAsto2" x1="12.301" x2="14.296" y1="6.286" y2="15.369" gradientUnits="userSpaceOnUse"><stop stopColor="#F4C9EA"/><stop offset="1" stopColor="#E995AE"/></linearGradient><linearGradient id="tokenBrandedAsto3" x1="13.918" x2="15.036" y1="7.454" y2="13.607" gradientUnits="userSpaceOnUse"><stop stopColor="#F9DBFF"/><stop offset=".57" stopColor="#ED9FF9"/><stop offset="1" stopColor="#F3BBFB"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><mask id="tokenBrandedAsto" width="20" height="20" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M22 2H2v20h20z"/></mask><g fill="none"><g mask="url(#tokenBrandedAsto)"><path fill="#1E1E20" d="M2 2h20v20H2z"/><path fill="url(#tokenBrandedAsto1)" d="M9.428 16.396a5.1 5.1 0 0 1 2.31-.493c.472 0 1.35.025 2.311.493c.911.443 3.143.536 3.143-1.939c0-1.057-.485-2.436-1.153-3.75c-.668-1.321-2.44-4.421-4.3-4.421c-1.857 0-3.629 3.103-4.3 4.421c-.668 1.314-1.154 2.693-1.154 3.75c0 2.475 2.236 2.382 3.143 1.94"/><path fill="url(#tokenBrandedAsto2)" d="M14.322 14.143a3.393 3.393 0 1 0 0-6.786a3.393 3.393 0 0 0 0 6.786"/><path fill="url(#tokenBrandedAsto3)" d="M13.8 7.396a3.393 3.393 0 1 0 3.14 5.515a13 13 0 0 0-.9-2.204c-.411-.81-1.232-2.286-2.24-3.31"/></g><defs><linearGradient id="tokenBrandedAsto1" x1="11.999" x2="11.999" y1="6.286" y2="16.643" gradientUnits="userSpaceOnUse"><stop stop-color="#7F70FD"/><stop offset=".53" stop-color="#6551F1"/><stop offset="1" stop-color="#846DF8"/></linearGradient><linearGradient id="tokenBrandedAsto2" x1="12.301" x2="14.296" y1="6.286" y2="15.369" gradientUnits="userSpaceOnUse"><stop stop-color="#F4C9EA"/><stop offset="1" stop-color="#E995AE"/></linearGradient><linearGradient id="tokenBrandedAsto3" x1="13.918" x2="15.036" y1="7.454" y2="13.607" gradientUnits="userSpaceOnUse"><stop stop-color="#F9DBFF"/><stop offset=".57" stop-color="#ED9FF9"/><stop offset="1" stop-color="#F3BBFB"/></linearGradient></defs></g></svg> </template>
CSS
.icon-asto {
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%3Cmask%20id%3D%22tokenBrandedAsto%22%20width%3D%2220%22%20height%3D%2220%22%20x%3D%222%22%20y%3D%222%22%20maskUnits%3D%22userSpaceOnUse%22%20style%3D%22mask-type%3Aluminance%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M22%202H2v20h20z%22%2F%3E%3C%2Fmask%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20mask%3D%22url(%23tokenBrandedAsto)%22%3E%3Cpath%20fill%3D%22%231E1E20%22%20d%3D%22M2%202h20v20H2z%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto1)%22%20d%3D%22M9.428%2016.396a5.1%205.1%200%200%201%202.31-.493c.472%200%201.35.025%202.311.493c.911.443%203.143.536%203.143-1.939c0-1.057-.485-2.436-1.153-3.75c-.668-1.321-2.44-4.421-4.3-4.421c-1.857%200-3.629%203.103-4.3%204.421c-.668%201.314-1.154%202.693-1.154%203.75c0%202.475%202.236%202.382%203.143%201.94%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto2)%22%20d%3D%22M14.322%2014.143a3.393%203.393%200%201%200%200-6.786a3.393%203.393%200%200%200%200%206.786%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto3)%22%20d%3D%22M13.8%207.396a3.393%203.393%200%201%200%203.14%205.515a13%2013%200%200%200-.9-2.204c-.411-.81-1.232-2.286-2.24-3.31%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto1%22%20x1%3D%2211.999%22%20x2%3D%2211.999%22%20y1%3D%226.286%22%20y2%3D%2216.643%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237F70FD%22%2F%3E%3Cstop%20offset%3D%22.53%22%20stop-color%3D%22%236551F1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23846DF8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto2%22%20x1%3D%2212.301%22%20x2%3D%2214.296%22%20y1%3D%226.286%22%20y2%3D%2215.369%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F4C9EA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E995AE%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto3%22%20x1%3D%2213.918%22%20x2%3D%2215.036%22%20y1%3D%227.454%22%20y2%3D%2213.607%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F9DBFF%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22%23ED9FF9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F3BBFB%22%2F%3E%3C%2FlinearGradient%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%3Cmask%20id%3D%22tokenBrandedAsto%22%20width%3D%2220%22%20height%3D%2220%22%20x%3D%222%22%20y%3D%222%22%20maskUnits%3D%22userSpaceOnUse%22%20style%3D%22mask-type%3Aluminance%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M22%202H2v20h20z%22%2F%3E%3C%2Fmask%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20mask%3D%22url(%23tokenBrandedAsto)%22%3E%3Cpath%20fill%3D%22%231E1E20%22%20d%3D%22M2%202h20v20H2z%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto1)%22%20d%3D%22M9.428%2016.396a5.1%205.1%200%200%201%202.31-.493c.472%200%201.35.025%202.311.493c.911.443%203.143.536%203.143-1.939c0-1.057-.485-2.436-1.153-3.75c-.668-1.321-2.44-4.421-4.3-4.421c-1.857%200-3.629%203.103-4.3%204.421c-.668%201.314-1.154%202.693-1.154%203.75c0%202.475%202.236%202.382%203.143%201.94%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto2)%22%20d%3D%22M14.322%2014.143a3.393%203.393%200%201%200%200-6.786a3.393%203.393%200%200%200%200%206.786%22%2F%3E%3Cpath%20fill%3D%22url(%23tokenBrandedAsto3)%22%20d%3D%22M13.8%207.396a3.393%203.393%200%201%200%203.14%205.515a13%2013%200%200%200-.9-2.204c-.411-.81-1.232-2.286-2.24-3.31%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto1%22%20x1%3D%2211.999%22%20x2%3D%2211.999%22%20y1%3D%226.286%22%20y2%3D%2216.643%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237F70FD%22%2F%3E%3Cstop%20offset%3D%22.53%22%20stop-color%3D%22%236551F1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23846DF8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto2%22%20x1%3D%2212.301%22%20x2%3D%2214.296%22%20y1%3D%226.286%22%20y2%3D%2215.369%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F4C9EA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E995AE%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tokenBrandedAsto3%22%20x1%3D%2213.918%22%20x2%3D%2215.036%22%20y1%3D%227.454%22%20y2%3D%2213.607%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F9DBFF%22%2F%3E%3Cstop%20offset%3D%22.57%22%20stop-color%3D%22%23ED9FF9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F3BBFB%22%2F%3E%3C%2FlinearGradient%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/asto.svg?color=%231a73e8&size=48
