mana logo

mana from Web3 Icons Branded by 0xa3k5 · Branded · MIT Free for personal and commercial use.

Name: mana
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 mana logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVG405vMwoP)" d="M9.206 6.863v7.706h6.637z"/><path fill="#fff" d="M3 14.569h6.206V6.863z"/><path fill="#ff2d55" d="M6.251 19.064a10.7 10.7 0 0 0 6.165 1.926c2.312 0 4.449-.717 6.165-1.926z"/><path fill="#ffbc5b" d="M3 14.57c.32.687.722 1.334 1.197 1.926H15.93v-1.927z"/><path fill="url(#SVGm1GdcdDA)" d="M16.29 12v5.78H21z"/><path fill="#fff" d="M11.584 17.78h4.706V12z"/><path fill="#ffc95b" d="M16.29 9.688a2.568 2.568 0 1 0 0-5.137a2.568 2.568 0 0 0 0 5.137m-7.084-4.11a1.284 1.284 0 1 0 0-2.568a1.284 1.284 0 0 0 0 2.568"/><defs><linearGradient id="SVG405vMwoP" x1="12.287" x2="12.287" y1="3.01" y2="20.991" gradientUnits="userSpaceOnUse"><stop stop-color="#a524b3"/><stop offset="1" stop-color="#ff2d55"/></linearGradient><linearGradient id="SVGm1GdcdDA" x1="11.995" x2="11.995" y1="3.01" y2="20.99" gradientUnits="userSpaceOnUse"><stop stop-color="#a524b3"/><stop offset="1" stop-color="#ff2d55"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedMana(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="url(#SVG405vMwoP)" d="M9.206 6.863v7.706h6.637z"/><path fill="#fff" d="M3 14.569h6.206V6.863z"/><path fill="#ff2d55" d="M6.251 19.064a10.7 10.7 0 0 0 6.165 1.926c2.312 0 4.449-.717 6.165-1.926z"/><path fill="#ffbc5b" d="M3 14.57c.32.687.722 1.334 1.197 1.926H15.93v-1.927z"/><path fill="url(#SVGm1GdcdDA)" d="M16.29 12v5.78H21z"/><path fill="#fff" d="M11.584 17.78h4.706V12z"/><path fill="#ffc95b" d="M16.29 9.688a2.568 2.568 0 1 0 0-5.137a2.568 2.568 0 0 0 0 5.137m-7.084-4.11a1.284 1.284 0 1 0 0-2.568a1.284 1.284 0 0 0 0 2.568"/><defs><linearGradient id="SVG405vMwoP" x1="12.287" x2="12.287" y1="3.01" y2="20.991" gradientUnits="userSpaceOnUse"><stop stopColor="#a524b3"/><stop offset="1" stopColor="#ff2d55"/></linearGradient><linearGradient id="SVGm1GdcdDA" x1="11.995" x2="11.995" y1="3.01" y2="20.99" gradientUnits="userSpaceOnUse"><stop stopColor="#a524b3"/><stop offset="1" stopColor="#ff2d55"/></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="url(#SVG405vMwoP)" d="M9.206 6.863v7.706h6.637z"/><path fill="#fff" d="M3 14.569h6.206V6.863z"/><path fill="#ff2d55" d="M6.251 19.064a10.7 10.7 0 0 0 6.165 1.926c2.312 0 4.449-.717 6.165-1.926z"/><path fill="#ffbc5b" d="M3 14.57c.32.687.722 1.334 1.197 1.926H15.93v-1.927z"/><path fill="url(#SVGm1GdcdDA)" d="M16.29 12v5.78H21z"/><path fill="#fff" d="M11.584 17.78h4.706V12z"/><path fill="#ffc95b" d="M16.29 9.688a2.568 2.568 0 1 0 0-5.137a2.568 2.568 0 0 0 0 5.137m-7.084-4.11a1.284 1.284 0 1 0 0-2.568a1.284 1.284 0 0 0 0 2.568"/><defs><linearGradient id="SVG405vMwoP" x1="12.287" x2="12.287" y1="3.01" y2="20.991" gradientUnits="userSpaceOnUse"><stop stop-color="#a524b3"/><stop offset="1" stop-color="#ff2d55"/></linearGradient><linearGradient id="SVGm1GdcdDA" x1="11.995" x2="11.995" y1="3.01" y2="20.99" gradientUnits="userSpaceOnUse"><stop stop-color="#a524b3"/><stop offset="1" stop-color="#ff2d55"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-mana {
  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%22url(%23SVG405vMwoP)%22%20d%3D%22M9.206%206.863v7.706h6.637z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3%2014.569h6.206V6.863z%22%2F%3E%3Cpath%20fill%3D%22%23ff2d55%22%20d%3D%22M6.251%2019.064a10.7%2010.7%200%200%200%206.165%201.926c2.312%200%204.449-.717%206.165-1.926z%22%2F%3E%3Cpath%20fill%3D%22%23ffbc5b%22%20d%3D%22M3%2014.57c.32.687.722%201.334%201.197%201.926H15.93v-1.927z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGm1GdcdDA)%22%20d%3D%22M16.29%2012v5.78H21z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M11.584%2017.78h4.706V12z%22%2F%3E%3Cpath%20fill%3D%22%23ffc95b%22%20d%3D%22M16.29%209.688a2.568%202.568%200%201%200%200-5.137a2.568%202.568%200%200%200%200%205.137m-7.084-4.11a1.284%201.284%200%201%200%200-2.568a1.284%201.284%200%200%200%200%202.568%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG405vMwoP%22%20x1%3D%2212.287%22%20x2%3D%2212.287%22%20y1%3D%223.01%22%20y2%3D%2220.991%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23a524b3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff2d55%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGm1GdcdDA%22%20x1%3D%2211.995%22%20x2%3D%2211.995%22%20y1%3D%223.01%22%20y2%3D%2220.99%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23a524b3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff2d55%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%22url(%23SVG405vMwoP)%22%20d%3D%22M9.206%206.863v7.706h6.637z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3%2014.569h6.206V6.863z%22%2F%3E%3Cpath%20fill%3D%22%23ff2d55%22%20d%3D%22M6.251%2019.064a10.7%2010.7%200%200%200%206.165%201.926c2.312%200%204.449-.717%206.165-1.926z%22%2F%3E%3Cpath%20fill%3D%22%23ffbc5b%22%20d%3D%22M3%2014.57c.32.687.722%201.334%201.197%201.926H15.93v-1.927z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGm1GdcdDA)%22%20d%3D%22M16.29%2012v5.78H21z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M11.584%2017.78h4.706V12z%22%2F%3E%3Cpath%20fill%3D%22%23ffc95b%22%20d%3D%22M16.29%209.688a2.568%202.568%200%201%200%200-5.137a2.568%202.568%200%200%200%200%205.137m-7.084-4.11a1.284%201.284%200%201%200%200-2.568a1.284%201.284%200%200%200%200%202.568%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG405vMwoP%22%20x1%3D%2212.287%22%20x2%3D%2212.287%22%20y1%3D%223.01%22%20y2%3D%2220.991%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23a524b3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff2d55%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGm1GdcdDA%22%20x1%3D%2211.995%22%20x2%3D%2211.995%22%20y1%3D%223.01%22%20y2%3D%2220.99%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23a524b3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff2d55%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/mana.svg?color=%231a73e8&size=48