N8n icon
thesvg-color:n8n
The N8n icon (thesvg-color:n8n) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 228 × 120 grid. theSVG Color icons are released under the MIT 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
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 228 × 120
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="228" height="120" viewBox="0 0 228 120"><path fill="#ea4b71" fill-rule="evenodd" d="M204 48c-11.183 0-20.58-7.649-23.244-18h-27.508a12 12 0 0 0-11.836 10.027l-.987 5.919A23.94 23.94 0 0 1 132.626 60a23.94 23.94 0 0 1 7.799 14.054l.987 5.919A12 12 0 0 0 153.248 90h3.508C159.42 79.649 168.817 72 180 72c13.255 0 24 10.745 24 24s-10.745 24-24 24c-11.183 0-20.58-7.649-23.244-18h-3.508c-11.732 0-21.744-8.482-23.673-20.054l-.987-5.919A12 12 0 0 0 116.752 66h-9.508C104.58 76.351 95.183 84 84 84s-20.58-7.649-23.244-18H47.244C44.58 76.351 35.183 84 24 84C10.745 84 0 73.255 0 60s10.745-24 24-24c11.183 0 20.58 7.649 23.244 18h13.512C63.42 43.649 72.817 36 84 36s20.58 7.649 23.244 18h9.508a12 12 0 0 0 11.836-10.027l.987-5.919C131.504 26.482 141.516 18 153.248 18h27.508C183.42 7.649 192.817 0 204 0c13.255 0 24 10.745 24 24s-10.745 24-24 24m0-12c6.627 0 12-5.373 12-12s-5.373-12-12-12s-12 5.373-12 12s5.373 12 12 12M24 72c6.627 0 12-5.373 12-12s-5.373-12-12-12s-12 5.373-12 12s5.373 12 12 12m72-12c0 6.627-5.373 12-12 12s-12-5.373-12-12s5.373-12 12-12s12 5.373 12 12m96 36c0 6.627-5.373 12-12 12s-12-5.373-12-12s5.373-12 12-12s12 5.373 12 12" clip-rule="evenodd"/></svg>How to use the N8n icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:n8n" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:n8n" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:n8n" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--n8n]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:n8n"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:n8n"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/n8n.svg" alt="N8n icon" width="24" height="24">N8n icon in other icon sets
N8n icon FAQ
Is the N8n icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the N8n icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:n8n" />, or use “Copy code” on this page to get a standalone React component.
How do I add the N8n icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/n8n.svg" alt="N8n icon">, or paste the SVG code inline to style it with CSS.