Suno icon
thesvg-color:suno
The Suno icon (thesvg-color:suno) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 122 × 122 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
- 122 × 122
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="122" height="122" viewBox="0 0 122 122"><path fill-rule="evenodd" d="M1.773 8.882C0 12.362 0 16.916 0 26.027v69.946c0 9.111 0 13.666 1.773 17.145a16.27 16.27 0 0 0 7.109 7.109C12.362 122 16.916 122 26.027 122h69.946c9.111 0 13.666 0 17.145-1.773a16.27 16.27 0 0 0 7.109-7.109C122 109.639 122 105.084 122 95.973V26.027c0-9.11 0-13.666-1.773-17.145a16.27 16.27 0 0 0-7.109-7.109C109.639 0 105.084 0 95.973 0H26.027C16.917 0 12.36 0 8.882 1.773a16.27 16.27 0 0 0-7.109 7.109M105.733 61c0-24.705-12.517-44.733-27.958-44.733S49.817 36.295 49.817 61h-33.55c0 24.706 12.517 44.733 27.958 44.733S72.183 85.705 72.183 61z" clip-rule="evenodd"/></svg>How to use the Suno icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:suno" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:suno" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:suno" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--suno]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:suno"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:suno"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/suno.svg" alt="Suno icon" width="24" height="24">Suno icon in other icon sets
Suno icon FAQ
Is the Suno 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 Suno icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:suno" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Suno icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/suno.svg" alt="Suno icon">, or paste the SVG code inline to style it with CSS.