Sunny icon

famicons:sunny

The Sunny icon (famicons:sunny) is a free SVG icon from the Famicons set by Family. It is drawn on a 512 × 512 grid. Famicons 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: Famicons
Author: Family
License: MIT
Size: 512 × 512

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22m0 368a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22m113.14-321.14a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44m-368 0H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44m307.08 147.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56M142.86 164.86a21.9 21.9 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102"/></svg>

How to use the Sunny icon

React

import { Icon } from "@iconify/react";

<Icon icon="famicons:sunny" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="famicons:sunny" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="famicons:sunny" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[famicons--sunny]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/famicons -->
<div class="i-famicons:sunny"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="famicons:sunny"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/famicons/sunny.svg" alt="Sunny icon" width="24" height="24">

Related icons in Famicons

Sunny icon in other icon sets

Sunny icon FAQ

Is the Sunny icon free for commercial use?

Yes. Famicons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Sunny icon in React?

Install @iconify/react and render <Icon icon="famicons:sunny" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Sunny icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/famicons/sunny.svg" alt="Sunny icon">, or paste the SVG code inline to style it with CSS.

Browse all Famicons →