Sun icon
vs:sun
The Sun icon (vs:sun) is a free SVG icon from the Vesper Icons set by TableCheck. It is drawn on a 1728 × 1792 grid. Vesper Icons are released under the Open Font 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
- Vesper Icons
- Author
- TableCheck
- License
- OFL-1.1
- Size
- 1728 × 1792
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1728" height="1792" viewBox="0 0 1728 1792"><path fill="currentColor" d="M873 416q-130 0-240.5 64.5t-175 175T393 896t64.5 240.5t175 175T873 1376t240.5-64.5t175-175T1353 896t-64.5-240.5t-175-175T873 416m853 757q0 6-7 12t-13 8l-293 97v306q0 16-13 26q-14 9-29 4l-292-94l-180 248q-9 12-26 12t-26-12l-180-248l-292 94q-15 5-29-4q-12-8-14-26v-306l-292-97q-16-5-20-20q-5-16 4-29l180-248L24 648q-9-13-4-29q4-15 20-20l292-97V196q2-18 14-26q14-9 29-4l292 94L847 12q9-12 26-12t26 12l180 248l292-94q15-5 29 4q13 10 13 26v306l293 97q6 2 13 8t7 12q4 15-4 29l-181 248l181 248q8 14 4 29m-277-277q0-157-77-289.5T1162.5 397T873 320t-289.5 77T374 606.5T297 896q0 118 46 225t123 184t183.5 122.5T873 1473q158 0 290.5-77.5t209-210T1449 896"/></svg>
How to use the Sun icon
React
import { Icon } from "@iconify/react";
<Icon icon="vs:sun" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="vs:sun" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="vs:sun" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[vs--sun]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/vs -->
<div class="i-vs:sun"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="vs:sun"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/vs/sun.svg" alt="Sun icon" width="24" height="24">
Related icons in Vesper Icons
Sun icon in other icon sets
Sun icon FAQ
Is the Sun icon free for commercial use?
Yes. Vesper Icons are released under the Open Font License, which allows use in personal and commercial projects.
How do I use the Sun icon in React?
Install @iconify/react and render <Icon icon="vs:sun" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Sun icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/vs/sun.svg" alt="Sun icon">, or paste the SVG code inline to style it with CSS.
Browse all Vesper Icons →
ICONYZ
