Brightness icon
icon-park:brightness
The Brightness icon (icon-park:brightness) 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
- Edit
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M24.0205 35.3535C30.0956 35.3535 35.0205 30.4286 35.0205 24.3535C35.0205 18.2784 30.0956 13.3535 24.0205 13.3535C17.9454 13.3535 13.0205 18.2784 13.0205 24.3535C13.0205 30.4286 17.9454 35.3535 24.0205 35.3535Z"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M38.9603 9.00977L36.5 11.4842"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M11.0674 36.7451L9.02051 38.8037"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M24 41.3533L24 44.3533"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M43.9998 23.3535L39.9998 23.3535"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M37.5324 36.3361L39.9998 38.8035"/><path fill="#fff" fill-rule="evenodd" d="M24.0205 17.3535C20.1545 17.3535 17.0205 20.4875 17.0205 24.3535C17.0205 28.2195 20.1545 31.3535 24.0205 31.3535" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M4.00019 24.3535L8.00019 24.3535"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M10.0444 9.00974L12.0972 11.0625"/><path stroke="#000" stroke-linecap="round" stroke-width="4" d="M24 3.35371L24 7.35371"/></g></svg>
How to use the Brightness icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:brightness" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:brightness" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:brightness" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--brightness]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:brightness"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:brightness"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/brightness.svg" alt="Brightness icon" width="24" height="24">
Brightness icon in other icon sets
Brightness icon FAQ
Is the Brightness 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 Brightness icon in React?
Install @iconify/react and render <Icon icon="icon-park:brightness" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Brightness icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/brightness.svg" alt="Brightness icon">, or paste the SVG code inline to style it with CSS.
Browse all IconPark icons →
ICONYZ
