React icon
la:react
The React icon (la:react) is a free SVG icon from the Line Awesome set by Icons8. It is drawn on a 32 × 32 grid. Line Awesome 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
- Line Awesome
- Author
- Icons8
- License
- Apache-2.0
- Size
- 32 × 32
- Category
- Other
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M11.404 3.36c-.845-.057-1.676.095-2.404.515c-.971.56-1.618 1.517-1.965 2.62c-.347 1.1-.427 2.37-.3 3.757c.012.14.037.287.054.43c-.132.056-.272.108-.4.168c-1.264.583-2.323 1.287-3.104 2.138C2.505 13.84 2 14.878 2 16c0 1.121.505 2.16 1.285 3.012s1.84 1.555 3.104 2.138c.128.06.268.112.4.168c-.017.143-.042.29-.055.43c-.126 1.387-.046 2.656.301 3.758S8.029 27.564 9 28.125c.971.56 2.122.643 3.25.393s2.267-.817 3.404-1.62c.115-.08.23-.175.346-.261c.115.086.23.18.346.261c1.137.803 2.276 1.37 3.404 1.62s2.279.168 3.25-.393c.971-.56 1.618-1.517 1.965-2.62c.347-1.1.427-2.37.3-3.757c-.012-.14-.037-.287-.054-.43c.132-.056.272-.108.4-.168c1.264-.583 2.323-1.287 3.104-2.138C29.495 18.16 30 17.122 30 16c0-1.121-.505-2.16-1.285-3.012s-1.84-1.555-3.104-2.138c-.128-.06-.268-.112-.4-.168c.017-.143.042-.29.055-.43c.126-1.387.046-2.656-.301-3.758S23.971 4.436 23 3.875c-.971-.56-2.122-.643-3.25-.393s-2.267.817-3.404 1.62c-.115.08-.23.175-.346.261c-.115-.086-.23-.18-.346-.261c-1.137-.803-2.276-1.37-3.404-1.62a5.6 5.6 0 0 0-.846-.123zm-.13 1.992q.255.018.544.084c.756.167 1.661.591 2.616 1.255a23 23 0 0 0-2.325 2.573a23 23 0 0 0-3.386.724c-.098-1.158-.014-2.154.218-2.892c.239-.756.595-1.22 1.059-1.489c.348-.2.762-.294 1.273-.255zm9.453 0c.51-.039.925.055 1.273.255c.464.268.82.733 1.059 1.489c.232.738.316 1.734.218 2.892a23 23 0 0 0-3.386-.724a23 23 0 0 0-2.325-2.573c.955-.664 1.86-1.088 2.616-1.255q.289-.065.545-.084M16 7.959c.351.325.702.686 1.053 1.064A30 30 0 0 0 16 9c-.355 0-.704.011-1.053.023c.35-.378.702-.739 1.053-1.064M16 11c.965 0 1.9.057 2.799.152A27 27 0 0 1 20.33 13.5c.482.835.9 1.673 1.268 2.5a27 27 0 0 1-1.268 2.5a27 27 0 0 1-1.531 2.348c-.9.095-1.834.152-2.799.152s-1.9-.057-2.799-.152A27 27 0 0 1 11.67 18.5c-.482-.835-.9-1.673-1.268-2.5c.367-.827.786-1.665 1.268-2.5s.999-1.617 1.531-2.348A27 27 0 0 1 16 11m-5.516.6c-.185.295-.369.592-.546.9a30 30 0 0 0-.506.924a20 20 0 0 1-.395-1.444c.457-.141.945-.266 1.447-.38m11.032 0c.502.114.99.239 1.447.38c-.106.467-.243.952-.395 1.444a30 30 0 0 0-.506-.924a30 30 0 0 0-.546-.9M7.154 12.703c.256 1.065.609 2.17 1.067 3.297a23 23 0 0 0-1.067 3.297c-1.051-.495-1.872-1.067-2.394-1.637C4.225 17.076 4 16.536 4 16s.225-1.076.76-1.66c.522-.57 1.343-1.142 2.394-1.637m17.692 0c1.051.495 1.872 1.067 2.394 1.637c.535.584.76 1.124.76 1.66s-.225 1.076-.76 1.66c-.522.57-1.343 1.142-2.394 1.637A23 23 0 0 0 23.779 16a23 23 0 0 0 1.067-3.297M16 13c-1.645 0-3 1.355-3 3s1.355 3 3 3s3-1.355 3-3s-1.355-3-3-3m0 2c.564 0 1 .436 1 1s-.436 1-1 1s-1-.436-1-1s.436-1 1-1m-6.568 3.576c.163.308.328.616.505.924c.178.308.362.605.547.9c-.502-.114-.99-.239-1.447-.38c.106-.467.243-.952.395-1.444m13.136 0c.152.492.29.977.395 1.444c-.457.141-.945.266-1.447.38c.185-.295.369-.592.547-.9c.177-.308.342-.616.505-.924M8.723 22.012c1.05.31 2.183.558 3.386.724a23 23 0 0 0 2.325 2.573c-.955.664-1.86 1.088-2.616 1.255c-.773.172-1.354.096-1.818-.171c-.464-.268-.82-.733-1.059-1.489c-.232-.738-.316-1.734-.218-2.892m14.554 0c.098 1.158.014 2.154-.218 2.892c-.239.756-.595 1.22-1.059 1.489c-.464.267-1.045.343-1.818.171c-.756-.167-1.661-.591-2.616-1.255a23 23 0 0 0 2.325-2.573a23 23 0 0 0 3.386-.724m-8.33.965c.349.012.698.023 1.053.023s.704-.011 1.053-.023c-.35.378-.702.739-1.053 1.064a20 20 0 0 1-1.053-1.064"/></svg>
How to use the React icon
React
import { Icon } from "@iconify/react";
<Icon icon="la:react" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="la:react" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="la:react" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[la--react]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/la -->
<div class="i-la:react"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="la:react"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/la/react.svg" alt="React icon" width="24" height="24">
Related icons in Line Awesome
React icon in other icon sets
React icon FAQ
Is the React icon free for commercial use?
Yes. Line Awesome icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the React icon in React?
Install @iconify/react and render <Icon icon="la:react" />, or use “Copy code” on this page to get a standalone React component.
How do I add the React icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/la/react.svg" alt="React icon">, or paste the SVG code inline to style it with CSS.
Browse all Line Awesome icons →
ICONYZ
