Sunshade icon
icon-park:sunshade
The Sunshade icon (icon-park:sunshade) is a free SVG icon from the IconPark set by ByteDance. It is drawn on a 48 × 48 grid. IconPark icons are released under the Apache 2.0 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
- IconPark
- Author
- ByteDance
- License
- Apache-2.0
- Size
- 48 × 48
- Category
- Travel
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M40.1032 25.8171C39.2068 28.0998 30.4308 28.8255 21.3618 26.3955C12.2929 23.9655 6.5828 19.5523 7.2617 17.0172C8.79543 11.2933 16.9744 2.46226 28.6712 6.68869C40.368 10.9151 41.6369 20.0931 40.1032 25.8171Z"/><path d="M27.9995 7.00001C27.9995 7.00001 23.9993 13.5 20.9995 24C17.9997 34.5 17.9997 42 17.9997 42"/><path d="M28.0003 6.99998C28.0003 6.99998 17.7941 8.84351 15 17"/><path d="M28.0003 7.00001C28.0003 7.00001 34 13 30.9998 22"/><path d="M10 43C10 43 19 41.5 26 41.5C33 41.5 39 42 39 42"/><path d="M27.9999 6.99988C29 6.99988 31 5.99988 31.8145 4.41966"/><path d="M34 41C34 39.3431 33 37 30 37C27 37 26 39.3431 26 41"/></g></svg>How to use the Sunshade icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:sunshade" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:sunshade" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:sunshade" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--sunshade]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:sunshade"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:sunshade"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/sunshade.svg" alt="Sunshade icon" width="24" height="24">Sunshade icon in other icon sets
Sunshade icon FAQ
Is the Sunshade icon free for commercial use?
Yes. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Sunshade icon in React?
Install @iconify/react and render <Icon icon="icon-park:sunshade" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Sunshade icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/sunshade.svg" alt="Sunshade icon">, or paste the SVG code inline to style it with CSS.