arc logo
arc from Web3 Icons Branded by 0xa3k5 · Branded · MIT Free for personal and commercial use.
- Name
- arc
- Set
- Web3 Icons Branded
- Style
- Branded
- Viewbox
- 24×24
- License
- MIT
1 other variant in Web3 Icons Branded
The same logo in other sets
Use the arc logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="#fff" d="M13.147 5.144a.82.82 0 0 0-.669-.344a.83.83 0 0 0-.668.334L5.057 14.57a12.5 12.5 0 0 1 3.112-1.625l4.294-6.002l4.099 5.925a12.6 12.6 0 0 1 2.895 1.404z"/><path fill="url(#SVG3hUBrb5C)" fill-opacity=".6" d="M3.514 18.804L3 19.2c.098-.123.273-.257.514-.396c2.078-1.527 6.27-4.011 9.89-4.201c4.937-.258 8.06 1.023 7.54 2.556c-.52 1.532-4.16-.515-7.54-.515c-2.967 0-8.141 1.183-9.89 2.16"/><path fill="url(#SVGsvsuHbmy)" fill-opacity=".6" d="M14.011 16.083c-4.279 0-8.944 2.078-10.738 3.117L3 18.788c1.83-1.06 6.593-3.188 11.011-3.188c3.924 0 5.776.735 6.331.997c.129.057.18.206.118.324a.267.267 0 0 1-.35.103c-.478-.22-2.252-.94-6.099-.94"/><defs><linearGradient id="SVG3hUBrb5C" x1="20.424" x2="3.136" y1="12.052" y2="12.567" gradientUnits="userSpaceOnUse"><stop stop-color="#197eaf"/><stop offset="1" stop-color="#041c28" stop-opacity=".1"/></linearGradient><linearGradient id="SVGsvsuHbmy" x1="19.678" x2="3.519" y1="17.43" y2="19.513" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".54" stop-color="#aeaeae"/><stop offset="1" stop-color="#1e1e1e"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedArc(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"><path fill="#fff" d="M13.147 5.144a.82.82 0 0 0-.669-.344a.83.83 0 0 0-.668.334L5.057 14.57a12.5 12.5 0 0 1 3.112-1.625l4.294-6.002l4.099 5.925a12.6 12.6 0 0 1 2.895 1.404z"/><path fill="url(#SVG3hUBrb5C)" fillOpacity=".6" d="M3.514 18.804L3 19.2c.098-.123.273-.257.514-.396c2.078-1.527 6.27-4.011 9.89-4.201c4.937-.258 8.06 1.023 7.54 2.556c-.52 1.532-4.16-.515-7.54-.515c-2.967 0-8.141 1.183-9.89 2.16"/><path fill="url(#SVGsvsuHbmy)" fillOpacity=".6" d="M14.011 16.083c-4.279 0-8.944 2.078-10.738 3.117L3 18.788c1.83-1.06 6.593-3.188 11.011-3.188c3.924 0 5.776.735 6.331.997c.129.057.18.206.118.324a.267.267 0 0 1-.35.103c-.478-.22-2.252-.94-6.099-.94"/><defs><linearGradient id="SVG3hUBrb5C" x1="20.424" x2="3.136" y1="12.052" y2="12.567" gradientUnits="userSpaceOnUse"><stop stopColor="#197eaf"/><stop offset="1" stopColor="#041c28" stopOpacity=".1"/></linearGradient><linearGradient id="SVGsvsuHbmy" x1="19.678" x2="3.519" y1="17.43" y2="19.513" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset=".54" stopColor="#aeaeae"/><stop offset="1" stopColor="#1e1e1e"/></linearGradient></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"><path fill="#fff" d="M13.147 5.144a.82.82 0 0 0-.669-.344a.83.83 0 0 0-.668.334L5.057 14.57a12.5 12.5 0 0 1 3.112-1.625l4.294-6.002l4.099 5.925a12.6 12.6 0 0 1 2.895 1.404z"/><path fill="url(#SVG3hUBrb5C)" fill-opacity=".6" d="M3.514 18.804L3 19.2c.098-.123.273-.257.514-.396c2.078-1.527 6.27-4.011 9.89-4.201c4.937-.258 8.06 1.023 7.54 2.556c-.52 1.532-4.16-.515-7.54-.515c-2.967 0-8.141 1.183-9.89 2.16"/><path fill="url(#SVGsvsuHbmy)" fill-opacity=".6" d="M14.011 16.083c-4.279 0-8.944 2.078-10.738 3.117L3 18.788c1.83-1.06 6.593-3.188 11.011-3.188c3.924 0 5.776.735 6.331.997c.129.057.18.206.118.324a.267.267 0 0 1-.35.103c-.478-.22-2.252-.94-6.099-.94"/><defs><linearGradient id="SVG3hUBrb5C" x1="20.424" x2="3.136" y1="12.052" y2="12.567" gradientUnits="userSpaceOnUse"><stop stop-color="#197eaf"/><stop offset="1" stop-color="#041c28" stop-opacity=".1"/></linearGradient><linearGradient id="SVGsvsuHbmy" x1="19.678" x2="3.519" y1="17.43" y2="19.513" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".54" stop-color="#aeaeae"/><stop offset="1" stop-color="#1e1e1e"/></linearGradient></defs></g></svg> </template>
CSS
.icon-arc {
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%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.147%205.144a.82.82%200%200%200-.669-.344a.83.83%200%200%200-.668.334L5.057%2014.57a12.5%2012.5%200%200%201%203.112-1.625l4.294-6.002l4.099%205.925a12.6%2012.6%200%200%201%202.895%201.404z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3hUBrb5C)%22%20fill-opacity%3D%22.6%22%20d%3D%22M3.514%2018.804L3%2019.2c.098-.123.273-.257.514-.396c2.078-1.527%206.27-4.011%209.89-4.201c4.937-.258%208.06%201.023%207.54%202.556c-.52%201.532-4.16-.515-7.54-.515c-2.967%200-8.141%201.183-9.89%202.16%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsvsuHbmy)%22%20fill-opacity%3D%22.6%22%20d%3D%22M14.011%2016.083c-4.279%200-8.944%202.078-10.738%203.117L3%2018.788c1.83-1.06%206.593-3.188%2011.011-3.188c3.924%200%205.776.735%206.331.997c.129.057.18.206.118.324a.267.267%200%200%201-.35.103c-.478-.22-2.252-.94-6.099-.94%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG3hUBrb5C%22%20x1%3D%2220.424%22%20x2%3D%223.136%22%20y1%3D%2212.052%22%20y2%3D%2212.567%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23197eaf%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23041c28%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGsvsuHbmy%22%20x1%3D%2219.678%22%20x2%3D%223.519%22%20y1%3D%2217.43%22%20y2%3D%2219.513%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.54%22%20stop-color%3D%22%23aeaeae%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e1e1e%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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.147%205.144a.82.82%200%200%200-.669-.344a.83.83%200%200%200-.668.334L5.057%2014.57a12.5%2012.5%200%200%201%203.112-1.625l4.294-6.002l4.099%205.925a12.6%2012.6%200%200%201%202.895%201.404z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3hUBrb5C)%22%20fill-opacity%3D%22.6%22%20d%3D%22M3.514%2018.804L3%2019.2c.098-.123.273-.257.514-.396c2.078-1.527%206.27-4.011%209.89-4.201c4.937-.258%208.06%201.023%207.54%202.556c-.52%201.532-4.16-.515-7.54-.515c-2.967%200-8.141%201.183-9.89%202.16%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsvsuHbmy)%22%20fill-opacity%3D%22.6%22%20d%3D%22M14.011%2016.083c-4.279%200-8.944%202.078-10.738%203.117L3%2018.788c1.83-1.06%206.593-3.188%2011.011-3.188c3.924%200%205.776.735%206.331.997c.129.057.18.206.118.324a.267.267%200%200%201-.35.103c-.478-.22-2.252-.94-6.099-.94%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG3hUBrb5C%22%20x1%3D%2220.424%22%20x2%3D%223.136%22%20y1%3D%2212.052%22%20y2%3D%2212.567%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23197eaf%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23041c28%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGsvsuHbmy%22%20x1%3D%2219.678%22%20x2%3D%223.519%22%20y1%3D%2217.43%22%20y2%3D%2219.513%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.54%22%20stop-color%3D%22%23aeaeae%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e1e1e%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/arc.svg?color=%231a73e8&size=48
