Vector icon
logos:vector
The Vector icon (logos:vector) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 301 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 256 × 301
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="301" viewBox="0 0 256 301"><defs><linearGradient id="SVG1Z1o1buX" x1="13.523%" x2="86.414%" y1="74.679%" y2="25.305%"><stop offset="0%" stop-color="#10e7ff"/><stop offset="10.3%" stop-color="#33d5ff"/><stop offset="25.5%" stop-color="#60bdff"/><stop offset="40.8%" stop-color="#86aaff"/><stop offset="56%" stop-color="#a39aff"/><stop offset="71%" stop-color="#b790ff"/><stop offset="85.8%" stop-color="#c489ff"/><stop offset="100%" stop-color="#c887ff"/></linearGradient><linearGradient id="SVGHlnDLDSp" x1="21.006%" x2="96.466%" y1="54.033%" y2="27.047%"><stop offset="0%" stop-color="#10e7ff"/><stop offset="10.3%" stop-color="#33d5ff"/><stop offset="25.5%" stop-color="#60bdff"/><stop offset="40.8%" stop-color="#86aaff"/><stop offset="56%" stop-color="#a39aff"/><stop offset="71%" stop-color="#b790ff"/><stop offset="85.8%" stop-color="#c489ff"/><stop offset="100%" stop-color="#c887ff"/></linearGradient></defs><path fill="url(#SVG1Z1o1buX)" d="M128 300.346L0 225.26V75.087L128 0l128 75.087V225.26zM17.89 214.677l109.858 64.504l109.858-64.504V85.67L128 21.165L17.89 85.67z"/><path fill="url(#SVGHlnDLDSp)" d="m183.181 109.354l-44.85 78.866l14.614 25.701l59.464-104.567zm-50.142 0L88.19 188.22l14.614 25.701l59.465-104.567zm-89.448 0l59.464 104.567l14.614-25.7l-44.85-78.867zm0 0l59.464 104.567l14.614-25.7l-44.85-78.867zm89.448 0L88.19 188.22l14.614 25.701l59.465-104.567z"/></svg>
How to use the Vector icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:vector" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:vector" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:vector" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--vector]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:vector"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:vector"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/logos/vector.svg" alt="Vector icon" width="24" height="24">
Vector icon in other icon sets
Vector icon FAQ
Is the Vector icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Vector icon in React?
Install @iconify/react and render <Icon icon="logos:vector" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Vector icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/vector.svg" alt="Vector icon">, or paste the SVG code inline to style it with CSS.
Browse all SVG Logos icons →
ICONYZ
