Microsoft Loop icon
thesvg-color:microsoft-loop
The Microsoft Loop icon (thesvg-color:microsoft-loop) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 48 × 48 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
- 48 × 48
- Tags
- microsoftloop
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGYUbnKeDT)" d="M24 4C12.954 4 4 12.954 4 24v20h20c11.046 0 20-8.954 20-20S35.046 4 24 4m0 13a7 7 0 1 1 0 14h-7v-7a7 7 0 0 1 7-7"/><path fill="url(#SVGKHS7VR2K)" d="M44 24c0 11.046-8.954 20-20 20H4c0-7.18 5.82-13 13-13h7a7 7 0 0 0 7-7z"/><path fill="url(#SVGySwtFcEZ)" fill-opacity=".56" d="M44 24c0 11.046-8.954 20-20 20H4c0-7.18 5.82-13 13-13h7a7 7 0 0 0 7-7z"/><path fill="url(#SVGJEW3Eerd)" fill-opacity=".1" d="M44 24c0 11.046-8.954 20-20 20H4c0-7.18 5.82-13 13-13h7a7 7 0 0 0 7-7z"/><path fill="url(#SVGbiFg9cOO)" d="M24 4C12.954 4 4 12.954 4 24v20h.005c7.163-.003 12.972-5.799 12.995-12.957l.043-.043H17v-7a7 7 0 0 1 11.988-4.91l9.206-9.18A19.94 19.94 0 0 0 24 4"/><path fill="url(#SVGq6XKKdvr)" d="M24 4C12.954 4 4 12.954 4 24v20h.005c7.163-.003 12.972-5.799 12.995-12.957l.043-.043H17v-7a7 7 0 0 1 11.988-4.91l9.206-9.18A19.94 19.94 0 0 0 24 4"/><defs><radialGradient id="SVGySwtFcEZ" cx="0" cy="0" r="1" gradientTransform="matrix(8 5.5 -9.6664 14.06022 11 35.5)" gradientUnits="userSpaceOnUse"><stop/><stop offset=".7" stop-opacity="0"/></radialGradient><radialGradient id="SVGJEW3Eerd" cx="0" cy="0" r="1" gradientTransform="matrix(14.79998 9.2 -16.1692 26.01131 8.6 34)" gradientUnits="userSpaceOnUse"><stop offset=".328"/><stop offset=".604" stop-opacity="0"/></radialGradient><radialGradient id="SVGq6XKKdvr" cx="0" cy="0" r="1" gradientTransform="matrix(26.79999 -4.6 12.09404 70.46091 .6 16.4)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d05e8"/><stop offset="1" stop-color="#6d05e8" stop-opacity="0"/></radialGradient><linearGradient id="SVGYUbnKeDT" x1="28.4" x2="21.8" y1="18.2" y2="45.2" gradientUnits="userSpaceOnUse"><stop stop-color="#9237e3"/><stop offset="1" stop-color="#48e6f3"/></linearGradient><linearGradient id="SVGKHS7VR2K" x1="17" x2="34.6" y1="41" y2="37" gradientUnits="userSpaceOnUse"><stop stop-color="#51e6ff"/><stop offset="1" stop-color="#71d4ff" stop-opacity="0"/></linearGradient><linearGradient id="SVGbiFg9cOO" x1="12.2" x2="22.4" y1="25.4" y2="11" gradientUnits="userSpaceOnUse"><stop stop-color="#6d05e8"/><stop offset="1" stop-color="#ab5add" stop-opacity="0"/></linearGradient></defs></g></svg>
How to use the Microsoft Loop icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:microsoft-loop" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:microsoft-loop" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:microsoft-loop" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--microsoft-loop]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:microsoft-loop"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:microsoft-loop"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/microsoft-loop.svg" alt="Microsoft Loop icon" width="24" height="24">
Related icons in theSVG Color
Microsoft Loop icon in other icon sets
Microsoft Loop icon FAQ
Is the Microsoft Loop 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 Microsoft Loop icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:microsoft-loop" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Microsoft Loop icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/microsoft-loop.svg" alt="Microsoft Loop icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
