navi logo
navi-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- navi-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 navi 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(#SVGHcSWxdhd59)"><path fill="#ffc524" d="M24 0H0v24h24z"/><path fill="#fff" d="m8.386 13.744l-3.614 4.064V6.052a1.807 1.807 0 1 1 3.614 0z"/><path fill="#fff" d="m8.256 10.84l-.16-5.776l9.966 12.016a1.773 1.773 0 0 1-.257 2.518a1.82 1.82 0 0 1-2.534-.26zm-3.48 6.828l3.614-4.29v4.816a1.807 1.807 0 0 1-3.614 0z"/><path fill="#fff" d="M4.776 6.622L8.39 11.04V6.05a1.807 1.807 0 1 0-3.614 0zm14.272.828c.119-.295.18-.61.18-.927C19.228 5.13 18.072 4 16.646 4s-2.58 1.13-2.58 2.523c0 .31.056.607.16.88c.49 1.603 1.768 2.85 2.407 3.308c1.424-1.049 2.13-2.383 2.415-3.262"/><path fill="#fff" d="M16.647 7.614a1.033 1.033 0 1 0 0-2.066a1.033 1.033 0 0 0 0 2.066"/></g><defs><clipPath id="SVGHcSWxdhd59"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedNaviBackground(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(#SVGHcSWxdhd59)"><path fill="#ffc524" d="M24 0H0v24h24z"/><path fill="#fff" d="m8.386 13.744l-3.614 4.064V6.052a1.807 1.807 0 1 1 3.614 0z"/><path fill="#fff" d="m8.256 10.84l-.16-5.776l9.966 12.016a1.773 1.773 0 0 1-.257 2.518a1.82 1.82 0 0 1-2.534-.26zm-3.48 6.828l3.614-4.29v4.816a1.807 1.807 0 0 1-3.614 0z"/><path fill="#fff" d="M4.776 6.622L8.39 11.04V6.05a1.807 1.807 0 1 0-3.614 0zm14.272.828c.119-.295.18-.61.18-.927C19.228 5.13 18.072 4 16.646 4s-2.58 1.13-2.58 2.523c0 .31.056.607.16.88c.49 1.603 1.768 2.85 2.407 3.308c1.424-1.049 2.13-2.383 2.415-3.262"/><path fill="#fff" d="M16.647 7.614a1.033 1.033 0 1 0 0-2.066a1.033 1.033 0 0 0 0 2.066"/></g><defs><clipPath id="SVGHcSWxdhd59"><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(#SVGHcSWxdhd59)"><path fill="#ffc524" d="M24 0H0v24h24z"/><path fill="#fff" d="m8.386 13.744l-3.614 4.064V6.052a1.807 1.807 0 1 1 3.614 0z"/><path fill="#fff" d="m8.256 10.84l-.16-5.776l9.966 12.016a1.773 1.773 0 0 1-.257 2.518a1.82 1.82 0 0 1-2.534-.26zm-3.48 6.828l3.614-4.29v4.816a1.807 1.807 0 0 1-3.614 0z"/><path fill="#fff" d="M4.776 6.622L8.39 11.04V6.05a1.807 1.807 0 1 0-3.614 0zm14.272.828c.119-.295.18-.61.18-.927C19.228 5.13 18.072 4 16.646 4s-2.58 1.13-2.58 2.523c0 .31.056.607.16.88c.49 1.603 1.768 2.85 2.407 3.308c1.424-1.049 2.13-2.383 2.415-3.262"/><path fill="#fff" d="M16.647 7.614a1.033 1.033 0 1 0 0-2.066a1.033 1.033 0 0 0 0 2.066"/></g><defs><clipPath id="SVGHcSWxdhd59"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-navi-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(%23SVGHcSWxdhd59)%22%3E%3Cpath%20fill%3D%22%23ffc524%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.386%2013.744l-3.614%204.064V6.052a1.807%201.807%200%201%201%203.614%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.256%2010.84l-.16-5.776l9.966%2012.016a1.773%201.773%200%200%201-.257%202.518a1.82%201.82%200%200%201-2.534-.26zm-3.48%206.828l3.614-4.29v4.816a1.807%201.807%200%200%201-3.614%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.776%206.622L8.39%2011.04V6.05a1.807%201.807%200%201%200-3.614%200zm14.272.828c.119-.295.18-.61.18-.927C19.228%205.13%2018.072%204%2016.646%204s-2.58%201.13-2.58%202.523c0%20.31.056.607.16.88c.49%201.603%201.768%202.85%202.407%203.308c1.424-1.049%202.13-2.383%202.415-3.262%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M16.647%207.614a1.033%201.033%200%201%200%200-2.066a1.033%201.033%200%200%200%200%202.066%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd59%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(%23SVGHcSWxdhd59)%22%3E%3Cpath%20fill%3D%22%23ffc524%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.386%2013.744l-3.614%204.064V6.052a1.807%201.807%200%201%201%203.614%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.256%2010.84l-.16-5.776l9.966%2012.016a1.773%201.773%200%200%201-.257%202.518a1.82%201.82%200%200%201-2.534-.26zm-3.48%206.828l3.614-4.29v4.816a1.807%201.807%200%200%201-3.614%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.776%206.622L8.39%2011.04V6.05a1.807%201.807%200%201%200-3.614%200zm14.272.828c.119-.295.18-.61.18-.927C19.228%205.13%2018.072%204%2016.646%204s-2.58%201.13-2.58%202.523c0%20.31.056.607.16.88c.49%201.603%201.768%202.85%202.407%203.308c1.424-1.049%202.13-2.383%202.415-3.262%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M16.647%207.614a1.033%201.033%200%201%200%200-2.066a1.033%201.033%200%200%200%200%202.066%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGHcSWxdhd59%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/navi-background.svg?color=%231a73e8&size=48
