navi logo

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

Name: navi
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 navi 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(#SVGJYIlZbgX)" d="M7.934 13.96L3.87 18.533V5.308a2.032 2.032 0 0 1 4.064 0z"/><path fill="url(#SVGIEX6hcZK)" d="m7.788 10.693l-.18-6.496L18.82 17.714a1.99 1.99 0 0 1-.288 2.833a2.046 2.046 0 0 1-2.85-.294z"/><path fill="#ffc524" d="m3.874 18.377l4.065-4.825v5.416a2.032 2.032 0 1 1-4.065 0z"/><path fill="#91d450" d="m3.874 5.949l4.065 4.971V5.308a2.032 2.032 0 1 0-4.065 0z"/><path fill="#ff7819" d="M19.929 6.88c.133-.33.202-.685.202-1.042C20.13 4.271 18.83 3 17.227 3s-2.903 1.27-2.903 2.838c0 .349.063.683.181.991c.55 1.803 1.989 3.205 2.707 3.72c1.602-1.18 2.396-2.68 2.717-3.669"/><path fill="#ac46bc" d="M17.227 7.065a1.162 1.162 0 1 0 .001-2.323a1.162 1.162 0 0 0 0 2.323"/><defs><linearGradient id="SVGJYIlZbgX" x1="20.131" x2="3.887" y1="12.499" y2="11.94" gradientUnits="userSpaceOnUse"><stop stop-color="#5dc17c"/><stop offset="1" stop-color="#8cd037"/></linearGradient><linearGradient id="SVGIEX6hcZK" x1="3.868" x2="14.423" y1="6.259" y2="23.395" gradientUnits="userSpaceOnUse"><stop stop-color="#9cd863"/><stop offset="1" stop-color="#49adda"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function TokenBrandedNavi(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(#SVGJYIlZbgX)" d="M7.934 13.96L3.87 18.533V5.308a2.032 2.032 0 0 1 4.064 0z"/><path fill="url(#SVGIEX6hcZK)" d="m7.788 10.693l-.18-6.496L18.82 17.714a1.99 1.99 0 0 1-.288 2.833a2.046 2.046 0 0 1-2.85-.294z"/><path fill="#ffc524" d="m3.874 18.377l4.065-4.825v5.416a2.032 2.032 0 1 1-4.065 0z"/><path fill="#91d450" d="m3.874 5.949l4.065 4.971V5.308a2.032 2.032 0 1 0-4.065 0z"/><path fill="#ff7819" d="M19.929 6.88c.133-.33.202-.685.202-1.042C20.13 4.271 18.83 3 17.227 3s-2.903 1.27-2.903 2.838c0 .349.063.683.181.991c.55 1.803 1.989 3.205 2.707 3.72c1.602-1.18 2.396-2.68 2.717-3.669"/><path fill="#ac46bc" d="M17.227 7.065a1.162 1.162 0 1 0 .001-2.323a1.162 1.162 0 0 0 0 2.323"/><defs><linearGradient id="SVGJYIlZbgX" x1="20.131" x2="3.887" y1="12.499" y2="11.94" gradientUnits="userSpaceOnUse"><stop stopColor="#5dc17c"/><stop offset="1" stopColor="#8cd037"/></linearGradient><linearGradient id="SVGIEX6hcZK" x1="3.868" x2="14.423" y1="6.259" y2="23.395" gradientUnits="userSpaceOnUse"><stop stopColor="#9cd863"/><stop offset="1" stopColor="#49adda"/></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(#SVGJYIlZbgX)" d="M7.934 13.96L3.87 18.533V5.308a2.032 2.032 0 0 1 4.064 0z"/><path fill="url(#SVGIEX6hcZK)" d="m7.788 10.693l-.18-6.496L18.82 17.714a1.99 1.99 0 0 1-.288 2.833a2.046 2.046 0 0 1-2.85-.294z"/><path fill="#ffc524" d="m3.874 18.377l4.065-4.825v5.416a2.032 2.032 0 1 1-4.065 0z"/><path fill="#91d450" d="m3.874 5.949l4.065 4.971V5.308a2.032 2.032 0 1 0-4.065 0z"/><path fill="#ff7819" d="M19.929 6.88c.133-.33.202-.685.202-1.042C20.13 4.271 18.83 3 17.227 3s-2.903 1.27-2.903 2.838c0 .349.063.683.181.991c.55 1.803 1.989 3.205 2.707 3.72c1.602-1.18 2.396-2.68 2.717-3.669"/><path fill="#ac46bc" d="M17.227 7.065a1.162 1.162 0 1 0 .001-2.323a1.162 1.162 0 0 0 0 2.323"/><defs><linearGradient id="SVGJYIlZbgX" x1="20.131" x2="3.887" y1="12.499" y2="11.94" gradientUnits="userSpaceOnUse"><stop stop-color="#5dc17c"/><stop offset="1" stop-color="#8cd037"/></linearGradient><linearGradient id="SVGIEX6hcZK" x1="3.868" x2="14.423" y1="6.259" y2="23.395" gradientUnits="userSpaceOnUse"><stop stop-color="#9cd863"/><stop offset="1" stop-color="#49adda"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-navi {
  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(%23SVGJYIlZbgX)%22%20d%3D%22M7.934%2013.96L3.87%2018.533V5.308a2.032%202.032%200%200%201%204.064%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIEX6hcZK)%22%20d%3D%22m7.788%2010.693l-.18-6.496L18.82%2017.714a1.99%201.99%200%200%201-.288%202.833a2.046%202.046%200%200%201-2.85-.294z%22%2F%3E%3Cpath%20fill%3D%22%23ffc524%22%20d%3D%22m3.874%2018.377l4.065-4.825v5.416a2.032%202.032%200%201%201-4.065%200z%22%2F%3E%3Cpath%20fill%3D%22%2391d450%22%20d%3D%22m3.874%205.949l4.065%204.971V5.308a2.032%202.032%200%201%200-4.065%200z%22%2F%3E%3Cpath%20fill%3D%22%23ff7819%22%20d%3D%22M19.929%206.88c.133-.33.202-.685.202-1.042C20.13%204.271%2018.83%203%2017.227%203s-2.903%201.27-2.903%202.838c0%20.349.063.683.181.991c.55%201.803%201.989%203.205%202.707%203.72c1.602-1.18%202.396-2.68%202.717-3.669%22%2F%3E%3Cpath%20fill%3D%22%23ac46bc%22%20d%3D%22M17.227%207.065a1.162%201.162%200%201%200%20.001-2.323a1.162%201.162%200%200%200%200%202.323%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGJYIlZbgX%22%20x1%3D%2220.131%22%20x2%3D%223.887%22%20y1%3D%2212.499%22%20y2%3D%2211.94%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235dc17c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238cd037%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGIEX6hcZK%22%20x1%3D%223.868%22%20x2%3D%2214.423%22%20y1%3D%226.259%22%20y2%3D%2223.395%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239cd863%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2349adda%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(%23SVGJYIlZbgX)%22%20d%3D%22M7.934%2013.96L3.87%2018.533V5.308a2.032%202.032%200%200%201%204.064%200z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIEX6hcZK)%22%20d%3D%22m7.788%2010.693l-.18-6.496L18.82%2017.714a1.99%201.99%200%200%201-.288%202.833a2.046%202.046%200%200%201-2.85-.294z%22%2F%3E%3Cpath%20fill%3D%22%23ffc524%22%20d%3D%22m3.874%2018.377l4.065-4.825v5.416a2.032%202.032%200%201%201-4.065%200z%22%2F%3E%3Cpath%20fill%3D%22%2391d450%22%20d%3D%22m3.874%205.949l4.065%204.971V5.308a2.032%202.032%200%201%200-4.065%200z%22%2F%3E%3Cpath%20fill%3D%22%23ff7819%22%20d%3D%22M19.929%206.88c.133-.33.202-.685.202-1.042C20.13%204.271%2018.83%203%2017.227%203s-2.903%201.27-2.903%202.838c0%20.349.063.683.181.991c.55%201.803%201.989%203.205%202.707%203.72c1.602-1.18%202.396-2.68%202.717-3.669%22%2F%3E%3Cpath%20fill%3D%22%23ac46bc%22%20d%3D%22M17.227%207.065a1.162%201.162%200%201%200%20.001-2.323a1.162%201.162%200%200%200%200%202.323%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGJYIlZbgX%22%20x1%3D%2220.131%22%20x2%3D%223.887%22%20y1%3D%2212.499%22%20y2%3D%2211.94%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%235dc17c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238cd037%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGIEX6hcZK%22%20x1%3D%223.868%22%20x2%3D%2214.423%22%20y1%3D%226.259%22%20y2%3D%2223.395%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239cd863%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2349adda%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/navi.svg?color=%231a73e8&size=48