React Light icon
thesvg-color:react-light
The React Light icon (thesvg-color:react-light) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 569 × 512 grid. theSVG Color icons 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
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 569 × 512
- Tags
- reactlight
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="569" height="512" viewBox="0 0 569 512"><g fill="#087ea4"><path d="M285.5 201c-30.1 0-54.5 24.4-54.5 54.5s24.4 54.5 54.5 54.5s54.5-24.4 54.5-54.5s-24.4-54.5-54.5-54.5"/><path d="M568.96 255.994c0-42.786-39.622-80.313-102.708-105.009c.843-5.561 1.605-11.063 2.147-16.464c6.223-61.48-8.59-105.852-41.69-124.967c-37.032-21.383-89.34-5.863-142.23 36.462C231.59 3.691 179.284-11.829 142.25 9.554c-33.099 19.115-47.912 63.488-41.69 124.967c.542 5.401 1.285 10.923 2.148 16.504a289 289 0 0 0-15.375 6.365C31.011 182.71 0 217.765 0 255.994c0 42.787 39.622 80.313 102.708 105.01c-.863 5.561-1.606 11.063-2.147 16.464c-6.223 61.48 8.59 105.852 41.689 124.967a73.5 73.5 0 0 0 37.354 9.557c31.352 0 67.964-16.504 104.876-46.02c36.892 29.516 73.524 46.02 104.916 46.02a73.57 73.57 0 0 0 37.354-9.557c33.099-19.115 47.912-63.488 41.69-124.967c-.542-5.401-1.305-10.903-2.148-16.464C529.378 336.347 569 298.76 569 255.994M389.155 27.103a47.44 47.44 0 0 1 24.087 5.903c22.982 13.271 33.299 49.272 28.281 98.764a267 267 0 0 1-1.224 10.22a479 479 0 0 0-80.288-16.845a480.3 480.3 0 0 0-54.797-61.179c31.373-24.254 60.818-36.863 83.921-36.863m-10.779 283.103a591 591 0 0 1-33.118 51.2a590 590 0 0 1-60.778 3.091a590 590 0 0 1-60.758-3.092a590 590 0 0 1-33.018-51.2a583 583 0 0 1-27.64-54.21a583 583 0 0 1 27.64-54.212a597 597 0 0 1 32.918-51.019a579 579 0 0 1 60.878-3.172a592 592 0 0 1 60.758 3.092a599 599 0 0 1 33.038 51.1a588 588 0 0 1 27.64 54.21a588 588 0 0 1-27.64 54.212m41.449-20.079a425.5 425.5 0 0 1 15.656 53.208a421 421 0 0 1-53.713 12.95a603 603 0 0 0 20.072-32.507c6.403-11.123 12.405-22.347 18.065-33.57m-173.442 100.17c12.485.763 25.23 1.205 38.137 1.205s25.732-.442 38.237-1.205a424 424 0 0 1-38.237 40.156a422 422 0 0 1-38.137-40.156m-59.051-34.133a421 421 0 0 1-53.733-12.91a425.5 425.5 0 0 1 15.596-53.127c5.58 11.223 11.561 22.447 18.065 33.57c6.503 11.124 13.227 22.087 20.072 32.507m-38.137-134.524a426 426 0 0 1-15.556-52.926a426 426 0 0 1 53.592-12.99c-6.864 10.38-13.589 21.142-20.072 32.365s-12.404 22.307-18.065 33.551m173.543-100.17c-12.485-.763-25.23-1.205-38.237-1.205q-19.35 0-38.137 1.205a422 422 0 0 1 38.137-40.157a422 422 0 0 1 38.237 40.157m79.083 66.62a591 591 0 0 0-20.172-32.527a421 421 0 0 1 53.853 12.97a429 429 0 0 1-15.596 53.127c-5.58-11.224-11.581-22.447-18.065-33.55m-274.203-56.44c-5.078-49.473 5.3-85.494 28.262-98.765a47.6 47.6 0 0 1 24.086-5.903c23.103 0 52.548 12.609 83.92 36.863a481 481 0 0 0-54.836 61.219a486 486 0 0 0-80.288 16.785c-.461-3.433-.883-6.826-1.204-10.2m-29.004 50.316a747 747 0 0 1 9.454-4.015a484.4 484.4 0 0 0 25.592 77.903a483.4 483.4 0 0 0-25.612 78.065c-51.144-20.982-80.79-50.055-80.79-78.065c0-26.543 26.094-53.468 71.356-73.888m57.326 296.857c-22.963-13.272-33.34-49.292-28.262-98.765c.321-3.373.743-6.766 1.204-10.22a479 479 0 0 0 80.288 16.846a482 482 0 0 0 54.797 61.219c-43.737 33.791-83.7 44.935-107.967 30.92m285.664-98.765c5.018 49.493-5.3 85.493-28.282 98.765c-24.246 14.055-64.23 2.871-107.947-30.92a482 482 0 0 0 54.777-61.219a479 479 0 0 0 80.288-16.846c.481 3.454.883 6.847 1.224 10.22m19.63-46.18a485.3 485.3 0 0 0-25.631-78.024a485.3 485.3 0 0 0 25.611-78.064c51.043 20.982 80.77 50.055 80.77 78.064c0 28.01-29.646 57.083-80.79 78.065"/></g></svg>
How to use the React Light icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:react-light" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:react-light" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:react-light" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--react-light]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:react-light"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:react-light"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/react-light.svg" alt="React Light icon" width="24" height="24">
Related icons in theSVG Color
React Light icon in other icon sets
React Light icon FAQ
Is the React Light icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the React Light icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:react-light" />, or use “Copy code” on this page to get a standalone React component.
How do I add the React Light icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/react-light.svg" alt="React Light icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
