Nanoleaf Screen Lights icon
cbi:nanoleaf-screen-lights
The Nanoleaf Screen Lights icon (cbi:nanoleaf-screen-lights) is a free SVG icon from the Custom Brand Icons set by Emanuele & rchiileea. It is drawn on a 24 × 24 grid. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Custom Brand Icons
- Author
- Emanuele & rchiileea
- License
- CC-BY-NC-SA-4.0
- Size
- 24 × 24
- Tags
- nanoleafscreen, screenlights, nanoleafscreenlights, light
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4.7 16.124v.382h1.391v-.137a1.42 1.42 0 0 1 1.283.007v.13h1.388v-.205a1.34 1.34 0 0 0 1.243.033v.176h1.389v-.169a1.4 1.4 0 0 1 1.256.057v.108h1.389v-.246a1.38 1.38 0 0 0 1.229.112v.134h1.389v-.132a1.41 1.41 0 0 1 1.247-.019v.151h1.389v-.305c.389.05.96-.6.976-1.034h.49v-1.391h-.222a1.46 1.46 0 0 1 .051-1.282h.171v-1.393h-.212a1.33 1.33 0 0 0-.023-1.243h.235V8.474H20a1.33 1.33 0 0 1-.707-.6v-.536H17.9v.27a1.23 1.23 0 0 0-1.282-.047v-.223h-1.385v.193a1.4 1.4 0 0 1-1.242.015v-.208H12.6v.219a1.29 1.29 0 0 0-1.257-.014v-.205H9.956v.151a1.41 1.41 0 0 1-1.228-.03v-.121H7.339v.194a1.33 1.33 0 0 0-1.248.023v-.217H4.7v.8h1.391v-.143a1.41 1.41 0 0 1 1.248-.009v.156h1.389v-.241a1.36 1.36 0 0 0 1.228.055v.19h1.389v-.159a1.4 1.4 0 0 1 1.255.014v.142h1.389v-.152a1.3 1.3 0 0 0 1.242-.014v.165h1.389v-.141a1.41 1.41 0 0 1 1.282.03v.108h1.055a1.34 1.34 0 0 0 1 .749v.971h.128a1.4 1.4 0 0 1 .009 1.243h-.137v1.389h.2a1.3 1.3 0 0 0-.069 1.282h-.134v1.168a1.45 1.45 0 0 1-.662.832v-.072H17.9v.2a1.34 1.34 0 0 0-1.247.039v-.239h-1.385v.2a1.43 1.43 0 0 1-1.229-.068v-.132H12.65v.286c-.189-.281-.861-.288-1.256-.1v-.186h-1.389v.171a1.41 1.41 0 0 1-1.243-.015v-.156H7.374v.234a1.28 1.28 0 0 0-1.283-.007v-.227H4.76a1.34 1.34 0 0 1-.715-.649v-1.075h-.2a1.35 1.35 0 0 0-.05-1.243h.247v-1.389H3.91a1.31 1.31 0 0 0-.034-1.282h.169V8.674h-.8v1.389h.2a1.42 1.42 0 0 1 .016 1.282h-.22v1.389h.12a1.41 1.41 0 0 1 .026 1.243h-.146v1.388h.5a1.32 1.32 0 0 0 .959.759m.732-8.165H5v-.438h.438Zm2.637 0h-.436v-.438h.439Zm2.617 0h-.438v-.438h.438Zm2.646 0H12.9v-.438h.439Zm2.631 0h-.438v-.438h.438Zm2.671 0H18.2v-.438h.438Zm1.5 1.248v-.355l.068-.084h.37v.439Zm0 2.631v-.437h.438v.439Zm0 2.232h.438v.439h-.438Zm-1.574 1.815H19v.438h-.44Zm-2.636 0h.438v.438h-.438Zm-2.618 0h.439v.438h-.439Zm-2.645 0h.439v.438h-.438Zm-2.632 0h.439v.438h-.439Zm-2.671 0H5.8v.438h-.442ZM3.424 9.769V9.33h.438v.439Zm0 2.671v-.439h.438v.439Zm0 2.192h.438v.439h-.438ZM2 6.15v11.7h20V6.15Zm19.543 11.245H2.457V6.607h19.086Z"/></svg>
How to use the Nanoleaf Screen Lights icon
React
import { Icon } from "@iconify/react";
<Icon icon="cbi:nanoleaf-screen-lights" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="cbi:nanoleaf-screen-lights" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="cbi:nanoleaf-screen-lights" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[cbi--nanoleaf-screen-lights]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/cbi -->
<div class="i-cbi:nanoleaf-screen-lights"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="cbi:nanoleaf-screen-lights"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/cbi/nanoleaf-screen-lights.svg" alt="Nanoleaf Screen Lights icon" width="24" height="24">
Related icons in Custom Brand Icons
Nanoleaf Screen Lights icon FAQ
Is the Nanoleaf Screen Lights icon free for commercial use?
No. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author.
How do I use the Nanoleaf Screen Lights icon in React?
Install @iconify/react and render <Icon icon="cbi:nanoleaf-screen-lights" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Nanoleaf Screen Lights icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/cbi/nanoleaf-screen-lights.svg" alt="Nanoleaf Screen Lights icon">, or paste the SVG code inline to style it with CSS.
Browse all Custom Brand Icons →
