Vuetify icon
thesvg-color:vuetify
The Vuetify icon (thesvg-color:vuetify) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 400 × 400 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
- 400 × 400
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><g fill="none"><circle cx="200.025" cy="199.975" r="186.895" fill="#fff"/><path fill="#aeddff" fill-rule="evenodd" d="M200.025 390.404c105.171 0 190.428-85.258 190.428-190.429c0-105.17-85.257-190.428-190.428-190.428S9.596 94.805 9.596 199.975c0 105.171 85.258 190.429 190.429 190.429m0 3.793c107.265 0 194.221-86.957 194.221-194.222S307.29 5.754 200.025 5.754C92.759 5.754 5.803 92.71 5.803 199.975s86.956 194.222 194.222 194.222" clip-rule="evenodd"/><path fill="#1697f6" d="m203.087 172.693l-58.124 100.696L200 368.773l72.896-126.26l72.863-126.26H235.651z"/><path fill="#aeddff" d="m127.137 242.513l3.818 6.64l54.373-94.222l22.34-38.678H54.242z"/><path fill="#1867c0" d="M235.651 116.253C263.203 206.922 200 368.773 200 368.773l-55.037-95.384z"/><path fill="#7bc6ff" d="M207.668 116.253c-116.082 0-76.713 132.9-76.713 132.9z"/></g></svg>How to use the Vuetify icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:vuetify" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:vuetify" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:vuetify" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--vuetify]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:vuetify"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:vuetify"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/vuetify.svg" alt="Vuetify icon" width="24" height="24">Vuetify icon in other icon sets
Vuetify icon FAQ
Is the Vuetify 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 Vuetify icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:vuetify" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Vuetify icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/vuetify.svg" alt="Vuetify icon">, or paste the SVG code inline to style it with CSS.