Swc icon
thesvg-color:swc
The Swc icon (thesvg-color:swc) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 977 × 346 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
- 977 × 346
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="977" height="346" viewBox="0 0 977 346"><linearGradient id="SVGzLfYidUL" x1="2.964" x2="973.652" y1="172.881" y2="172.881" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffa588"/><stop offset=".271" stop-color="#fcb371"/><stop offset=".836" stop-color="#f4d837"/><stop offset="1" stop-color="#f1e425"/></linearGradient><path fill="url(#SVGzLfYidUL)" d="M877.1 342.8c-26.1 0-50.7-10.2-69.2-28.7L663.8 170c-14.5-14.5-24-32.6-27.4-52.3c-2-11.5-1.9-23.3.3-34.8h-42.6c-10.4 0-14.8 6.9-16.5 11s-3.5 12.1 3.9 19.5l62.3 62.3c14.5 14.5 24 32.6 27.4 52.3c3.2 18.2 1 37-6.1 54.4c-7.2 17.3-19 32.1-34.1 42.8c-16.4 11.5-35.8 17.6-56.3 17.6h-2c-26.1 0-50.7-10.2-69.2-28.7l-13.8-13.8c-6.6 9.7-14.8 18.1-24.4 24.8c-16.4 11.5-35.8 17.6-56.3 17.6c-26.1 0-50.7-10.2-69.2-28.7l-226-226c-3.4-3.4-7.9-5.2-12.6-5.2c-10.4 0-14.8 6.9-16.5 11s-3.5 12.1 3.9 19.5l62.3 62.3c14.5 14.5 24 32.6 27.4 52.3c3.2 18.2 1 37-6.1 54.4c-7.2 17.3-19 32.1-34.1 42.8c-16.4 11.5-35.8 17.6-56.3 17.6H53.3c-22.1 0-40-17.9-40-40s17.9-40 40-40h28.1c10.4 0 14.8-6.9 16.5-11s3.5-12.1-3.9-19.5L31.8 170c-14.5-14.5-24-32.6-27.4-52.3c-3.2-18.2-1-37 6.1-54.4c7.2-17.3 19-32.1 34.1-42.8C61 9 80.5 2.9 101 2.9c26.1 0 50.7 10.2 69.2 28.7l226 226c3.4 3.4 7.9 5.2 12.6 5.2c10.4 0 14.8-6.9 16.5-11s3.5-12.1-3.8-19.4L260.3 71.2c-15.6-15.6-15.6-40.9 0-56.6s40.9-15.6 56.6 0L478 175.7l.2.2l81.7 81.7c3.4 3.4 7.9 5.2 12.6 5.2h2c10.4 0 14.8-6.9 16.5-11s3.5-12.1-3.9-19.5L524.9 170c-14.5-14.5-24-32.6-27.4-52.3c-3.2-18.2-1-37 6.1-54.4c7.2-17.3 19-32.1 34.1-42.8C554.1 9 573.6 2.9 594.1 2.9H757c22.1 0 40 17.9 40 40s-17.9 40-40 40h-24c-10.4 0-14.8 6.9-16.5 11s-3.5 12.1 3.9 19.5l144.1 144.1c3.4 3.4 7.9 5.2 12.6 5.2c9.1 0 16.5-7.4 16.5-16.5c0-22.1 17.9-40 40-40s40 17.9 40 40c.1 53.3-43.3 96.6-96.5 96.6"/><path fill="#fff" d="M877.1 307.8c-16.8 0-32.6-6.5-44.5-18.4L688.5 145.3c-18.3-18.3-23.5-44.6-13.6-68.5c5.1-12.2 13.4-22.1 23.7-28.8H594.1c-21.8 0-40.5 12.5-48.9 32.6s-3.9 42.2 11.5 57.6l62.3 62.3c18.3 18.3 23.5 44.6 13.6 68.5s-32.2 38.8-58.1 38.8h-2c-16.8 0-32.6-6.5-44.5-18.4l-57.5-57.5c2.6 12.1 1.4 24.9-3.6 37.1c-9.9 23.9-32.2 38.8-58.1 38.8c-16.8 0-32.6-6.5-44.5-18.4l-226-226c-10-10-23.3-15.5-37.4-15.5c-21.8 0-40.5 12.5-48.9 32.6c-8.3 20.1-3.9 42.2 11.5 57.6l62.3 62.3c18.3 18.3 23.5 44.6 13.6 68.5s-32.2 38.8-58.1 38.8h-28c-2.8 0-5-2.2-5-5s2.2-5 5-5h28.1c21.8 0 40.5-12.5 48.9-32.6s3.9-42.2-11.5-57.6l-62.3-62.3C38.2 127 33 100.7 42.9 76.8c9.9-24 32.1-38.9 58.1-38.9c16.8 0 32.6 6.5 44.5 18.4l226 226c10 10 23.3 15.5 37.4 15.5c21.8 0 40.5-12.5 48.9-32.6c8.3-20.1 4-42.1-11.4-57.5L285.1 46.5c-2-2-2-5.1 0-7.1s5.1-2 7.1 0l161.1 161.1l.1.1l81.7 81.7c10 10 23.3 15.5 37.4 15.5h2c21.8 0 40.5-12.5 48.9-32.6c8.3-20.1 3.9-42.2-11.5-57.6l-62.3-62.3c-18.3-18.3-23.5-44.6-13.6-68.5S568.2 38 594.1 38H757c2.8 0 5 2.2 5 5s-2.2 5-5 5h-24c-21.8 0-40.5 12.5-48.9 32.6c-8.3 20.1-3.9 42.2 11.5 57.6l144.1 144.1c10 10 23.3 15.5 37.4 15.5c28.4 0 51.5-23.1 51.5-51.5c0-2.8 2.2-5 5-5s5 2.2 5 5c.1 33.9-27.5 61.5-61.5 61.5"/></svg>How to use the Swc icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:swc" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:swc" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:swc" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--swc]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:swc"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:swc"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/swc.svg" alt="Swc icon" width="24" height="24">Swc icon in other icon sets
Swc icon FAQ
Is the Swc 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 Swc icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:swc" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Swc icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/swc.svg" alt="Swc icon">, or paste the SVG code inline to style it with CSS.