Sleeping Outline icon

solar:sleeping-outline

The Sleeping Outline icon (solar:sleeping-outline) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: UI
Tags: sleepingoutline

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.75 6C2.75 5.58579 2.41421 5.25 2 5.25C1.58579 5.25 1.25 5.58579 1.25 6V18C1.25 18.4142 1.58579 18.75 2 18.75C2.41421 18.75 2.75 18.4142 2.75 18V16.75L12 16.75L21.25 16.75V18C21.25 18.4142 21.5858 18.75 22 18.75C22.4142 18.75 22.75 18.4142 22.75 18V16.0048L22.75 16L22.75 15.9952L22.75 15.4694C22.7503 13.6408 22.7505 12.5245 22.4273 11.6009C21.8494 9.94923 20.5508 8.65062 18.8991 8.07267C17.9755 7.74949 16.8592 7.74967 15.0306 7.74998L14.7315 7.74993C14.0576 7.74936 13.5358 7.74892 13.0917 7.90432C12.3018 8.18073 11.6807 8.8018 11.4043 9.59173C11.2489 10.0358 11.2493 10.5577 11.2499 11.2315L11.25 15.25H2.75V6ZM21.2498 15.25H12.75V11.3571C12.75 10.4964 12.7606 10.2573 12.8201 10.0872C12.9458 9.72809 13.2281 9.44579 13.5871 9.32015C13.7573 9.26061 13.9964 9.25 14.8571 9.25C16.9148 9.25 17.7524 9.26061 18.4037 9.4885C19.6245 9.91567 20.5843 10.8755 21.0115 12.0963C21.2243 12.7045 21.2476 13.4751 21.2498 15.25Z"/><path d="M7 7.75C5.20507 7.75 3.75 9.20507 3.75 11C3.75 12.7949 5.20507 14.25 7 14.25C8.79493 14.25 10.25 12.7949 10.25 11C10.25 9.20507 8.79493 7.75 7 7.75ZM5.25 11C5.25 10.0335 6.0335 9.25 7 9.25C7.9665 9.25 8.75 10.0335 8.75 11C8.75 11.9665 7.9665 12.75 7 12.75C6.0335 12.75 5.25 11.9665 5.25 11Z"/></g></svg>

How to use the Sleeping Outline icon

React

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

<Icon icon="solar:sleeping-outline" width="24" />

Vue

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

<template>
  <Icon icon="solar:sleeping-outline" width="24" />
</template>

Svelte

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

<Icon icon="solar:sleeping-outline" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--sleeping-outline]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:sleeping-outline"></div>

Web component

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

<iconify-icon icon="solar:sleeping-outline"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/sleeping-outline.svg" alt="Sleeping Outline icon" width="24" height="24">

Related icons in Solar

Sleeping Outline icon FAQ

Is the Sleeping Outline icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Sleeping Outline icon in React?

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

How do I add the Sleeping Outline icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/sleeping-outline.svg" alt="Sleeping Outline icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →