Neon icon
logos:neon
The Neon icon (logos:neon) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 145 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
- 512 × 145
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="145" viewBox="0 0 512 145"><defs><linearGradient id="SVGZSjXdboi" x1="100%" x2="12.069%" y1="100%" y2="0%"><stop offset="0%" stop-color="#62f755"/><stop offset="100%" stop-color="#8ff986" stop-opacity="0"/></linearGradient><linearGradient id="SVGMxAgOWFr" x1="100%" x2="40.603%" y1="100%" y2="76.897%"><stop offset="0%" stop-opacity=".9"/><stop offset="100%" stop-color="#1a1a1a" stop-opacity="0"/></linearGradient></defs><path fill="#00e0d9" d="M0 24.91C0 11.151 11.152 0 24.91 0h94.652c13.756 0 24.909 11.152 24.909 24.91v80.501c0 14.23-18.011 20.407-26.743 9.174l-27.31-35.13v42.599c0 12.38-10.036 22.417-22.416 22.417H24.909C11.152 144.47 0 133.318 0 119.56zm24.91-4.981a4.976 4.976 0 0 0-4.981 4.976v94.657a4.98 4.98 0 0 0 4.976 4.984h43.843c1.376 0 1.742-1.116 1.742-2.492V64.932c0-14.235 18.01-20.411 26.747-9.174l27.309 35.126V24.91c0-2.753.257-4.98-2.492-4.98z"/><path fill="url(#SVGZSjXdboi)" d="M0 24.91C0 11.151 11.152 0 24.91 0h94.652c13.756 0 24.909 11.152 24.909 24.91v80.501c0 14.23-18.011 20.407-26.743 9.174l-27.31-35.13v42.599c0 12.38-10.036 22.417-22.416 22.417H24.909C11.152 144.47 0 133.318 0 119.56zm24.91-4.981a4.976 4.976 0 0 0-4.981 4.976v94.657a4.98 4.98 0 0 0 4.976 4.984h43.843c1.376 0 1.742-1.116 1.742-2.492V64.932c0-14.235 18.01-20.411 26.747-9.174l27.309 35.126V24.91c0-2.753.257-4.98-2.492-4.98z"/><path fill="url(#SVGMxAgOWFr)" fill-opacity=".4" d="M0 24.91C0 11.151 11.152 0 24.91 0h94.652c13.756 0 24.909 11.152 24.909 24.91v80.501c0 14.23-18.011 20.407-26.743 9.174l-27.31-35.13v42.599c0 12.38-10.036 22.417-22.416 22.417H24.909C11.152 144.47 0 133.318 0 119.56zm24.91-4.981a4.976 4.976 0 0 0-4.981 4.976v94.657a4.98 4.98 0 0 0 4.976 4.984h43.843c1.376 0 1.742-1.116 1.742-2.492V64.932c0-14.235 18.01-20.411 26.747-9.174l27.309 35.126V24.91c0-2.753.257-4.98-2.492-4.98z"/><path fill="#63f655" d="M119.562 0c13.756 0 24.909 11.152 24.909 24.91v80.501c0 14.23-18.011 20.407-26.743 9.174l-27.31-35.13v42.599c0 12.38-10.036 22.417-22.416 22.417a2.49 2.49 0 0 0 2.488-2.488V64.932c0-14.235 18.01-20.411 26.747-9.174l27.309 35.126V4.98A4.983 4.983 0 0 0 119.562 0"/><path fill="#1a1a1a" d="M243.537 42.539v37.787l-36.639-37.787h-19.07v61.8h17.393v-40.61l39.906 40.612h15.803V42.539zm49.634 48.028V79.62h38.935V66.465H293.17V56.31h47.234V42.54h-64.98v61.8h65.951V90.568zm94.424 15.804c24.455 0 40.347-12.008 40.347-32.932s-15.892-32.931-40.347-32.931s-40.26 12.007-40.26 32.931s15.804 32.932 40.26 32.932m0-14.656c-13.597 0-21.984-6.622-21.984-18.276s8.476-18.275 21.984-18.275c13.596 0 21.983 6.621 21.983 18.275s-8.387 18.276-21.983 18.276m107.012-49.176v37.787l-36.639-37.787h-19.07v61.8h17.393v-40.61l39.906 40.612H512V42.539z"/></svg>How to use the Neon icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:neon" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:neon" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:neon" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--neon]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:neon"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:neon"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/neon.svg" alt="Neon icon" width="24" height="24">Related icons in SVG Logos
Neon icon in other icon sets
Neon icon FAQ
Is the Neon 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 Neon icon in React?
Install @iconify/react and render <Icon icon="logos:neon" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Neon icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/neon.svg" alt="Neon icon">, or paste the SVG code inline to style it with CSS.