React Logo icon
fluent-mdl2:react-logo
The React Logo icon (fluent-mdl2:react-logo) is a free SVG icon from the Fluent UI MDL2 set by Microsoft Corporation. It is drawn on a 2048 × 2048 grid. Fluent UI MDL2 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
- Fluent UI MDL2
- Author
- Microsoft Corporation
- License
- MIT
- Size
- 2048 × 2048
- Tags
- reactlogo
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><path fill="currentColor" d="M2048 1039q0 47-21 88t-57 75t-81 63t-92 51t-94 40t-82 28q15 63 24 126t9 127q0 53-9 109t-34 101t-67 75t-108 29q-55 0-112-21t-111-55t-102-72t-87-75q-38 36-86 75t-103 72t-111 54t-112 22q-65 0-107-29t-67-74t-34-102t-10-109q0-64 9-127t24-126q-37-11-82-28t-93-39t-93-51t-80-63t-57-76t-22-88q0-47 21-88t57-75t81-63t92-51t94-40t82-28q-15-63-24-126t-9-127q0-53 9-109t34-101t67-75t108-29q55 0 112 21t111 55t102 72t87 76q38-36 86-75t103-73t111-54t112-22q65 0 107 29t67 74t34 102t10 109q0 64-9 127t-24 126q36 11 82 28t93 39t93 51t80 63t57 76t22 88m-612-816q-43 0-91 20t-94 49t-88 64t-71 62q47 49 88 101t81 107q69 6 136 17t133 27q13-56 21-113t8-114q0-30-4-68t-16-72t-37-57t-66-23m-834 930q-17 41-31 81t-28 83q43 11 86 18t87 13q-31-48-59-96t-55-99m-59-392q13 42 27 83t32 82q26-51 55-99t59-97q-44 6-87 13t-86 18m109 278q80 166 186 322q47 4 93 5t93 2q47 0 93-1t93-6q106-156 186-322q-42-85-87-164t-99-158q-47-3-93-5t-93-2t-93 2t-93 5q-53 78-98 157t-88 165m680 309q44-5 87-12t86-19q-13-42-27-82t-32-82q-26 51-54 99t-60 96m114-422q17-41 31-82t28-83q-43-10-86-17t-87-14q30 48 59 96t55 100m-311-309q-26-35-53-67t-58-65q-30 32-57 64t-54 68q55-3 111-3q55 0 111 3M489 443q0 57 8 114t21 113q66-16 133-27t136-17q39-55 80-107t89-101q-30-28-71-62t-87-63t-95-50t-91-20q-41 0-65 23t-37 56t-17 72t-4 69m-38 849q20-65 44-128t52-125q-28-62-52-125t-44-128q-24 7-59 19t-74 30t-79 40t-71 48t-52 55t-20 61q0 32 19 61t51 55t71 48t79 39t75 30t60 20m161 563q43 0 91-20t94-49t88-63t71-62q-47-49-88-101t-81-108q-68-6-135-17t-134-26q-13 56-21 112t-8 114q0 31 3 69t17 72t37 56t66 23m301-393q52 69 111 132q58-63 111-132q-56 3-111 3q-57 0-111-3m646 173q0-57-8-113t-21-113q-67 15-134 26t-135 17q-39 55-80 107t-89 102q30 28 71 61t87 63t95 50t91 20q41 0 65-22t37-56t17-72t4-70m38-343q24-7 59-19t75-30t79-40t71-48t51-55t20-61q0-32-20-61t-51-55t-71-48t-79-39t-75-30t-59-20q-20 65-44 128t-52 125q28 62 52 125t44 128m-573-62q-39 0-74-15t-60-41t-41-61t-15-74q0-39 15-74t40-60t61-41t74-15q39 0 74 15t60 40t41 61t15 74q0 39-15 74t-40 61t-61 41t-74 15"/></svg>How to use the React Logo icon
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-mdl2:react-logo" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-mdl2:react-logo" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-mdl2:react-logo" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-mdl2--react-logo]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-mdl2 -->
<div class="i-fluent-mdl2:react-logo"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-mdl2:react-logo"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/fluent-mdl2/react-logo.svg" alt="React Logo icon" width="24" height="24">React Logo icon FAQ
Is the React Logo icon free for commercial use?
Yes. Fluent UI MDL2 icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the React Logo icon in React?
Install @iconify/react and render <Icon icon="fluent-mdl2:react-logo" />, or use “Copy code” on this page to get a standalone React component.
How do I add the React Logo icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-mdl2/react-logo.svg" alt="React Logo icon">, or paste the SVG code inline to style it with CSS.