Sun Outlined icon
ant-design:sun-outlined
The Sun Outlined icon (ant-design:sun-outlined) is a free SVG icon from the Ant Design Icons set by HeskeyBaozi. It is drawn on a 1024 × 1024 grid. Ant Design 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
- Ant Design Icons
- Author
- HeskeyBaozi
- License
- MIT
- Size
- 1024 × 1024
- Tags
- sunoutlined
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" fill-rule="evenodd" d="M548 818v126c0 8.837-7.163 16-16 16h-40c-8.837 0-16-7.163-16-16V818q23.768 2.464 36 2.464T548 818m205.251-115.66l89.096 89.095c6.248 6.248 6.248 16.38 0 22.627l-28.285 28.285c-6.248 6.248-16.379 6.248-22.627 0L702.34 753.25q18.548-15.064 27.198-23.713q8.649-8.65 23.713-27.198m-482.502 0q15.064 18.548 23.713 27.198q8.65 8.649 27.198 23.713l-89.095 89.096c-6.248 6.248-16.38 6.248-22.627 0l-28.285-28.285c-6.248-6.248-6.248-16.379 0-22.627zM512 278c129.235 0 234 104.765 234 234S641.235 746 512 746S278 641.235 278 512s104.765-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162s162-72.53 162-162s-72.53-162-162-162M206 476q-2.464 23.768-2.464 36T206 548H80c-8.837 0-16-7.163-16-16v-40c0-8.837 7.163-16 16-16zm738 0c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H818q2.464-23.768 2.464-36T818 476ZM814.062 180.653l28.285 28.285c6.248 6.248 6.248 16.379 0 22.627L753.25 320.66q-15.064-18.548-23.713-27.198q-8.65-8.649-27.198-23.713l89.095-89.096c6.248-6.248 16.38-6.248 22.627 0m-581.497 0l89.095 89.096q-18.548 15.064-27.198 23.713q-8.649 8.65-23.713 27.198l-89.096-89.095c-6.248-6.248-6.248-16.38 0-22.627l28.285-28.285c6.248-6.248 16.379-6.248 22.627 0M532 64c8.837 0 16 7.163 16 16v126q-23.768-2.464-36-2.464T476 206V80c0-8.837 7.163-16 16-16z"/></svg>How to use the Sun Outlined icon
React
import { Icon } from "@iconify/react";
<Icon icon="ant-design:sun-outlined" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="ant-design:sun-outlined" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="ant-design:sun-outlined" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[ant-design--sun-outlined]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/ant-design -->
<div class="i-ant-design:sun-outlined"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ant-design:sun-outlined"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/ant-design/sun-outlined.svg" alt="Sun Outlined icon" width="24" height="24">Related icons in Ant Design Icons
Sun Outlined icon FAQ
Is the Sun Outlined icon free for commercial use?
Yes. Ant Design Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Sun Outlined icon in React?
Install @iconify/react and render <Icon icon="ant-design:sun-outlined" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Sun Outlined icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/ant-design/sun-outlined.svg" alt="Sun Outlined icon">, or paste the SVG code inline to style it with CSS.