Web Components icon
thesvg-color:web-components
The Web Components icon (thesvg-color:web-components) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 128 × 128 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
- 128 × 128
- Tags
- webcomponents, component
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#285eab" d="m31 12l-1 1L2 63l29 51h67l15-26v-2l14-23l-15-24v-2L98 12zm21 30h21l13 21l-13 21H52L40 63z"/><path fill="#166da5" d="m122 63l-12 21l-18-21l18-21z"/><path fill="#8fdb69" d="M108 88L89 65L78 84l17 26z"/><path fill="#166da5" d="M108 38L89 61L78 42l17-26z"/><path d="M63 110L35 63l28-47H33L6 63l27 47z"/><path fill="#287bbe" d="m50 38l13-22h32l13 22zm28 4h32l11 19H89z"/><path fill="#ddf021" d="m50 88l13 22h32l13-22zm28-4h32l11-19H89z"/></svg>
How to use the Web Components icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:web-components" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:web-components" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:web-components" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--web-components]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:web-components"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:web-components"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/web-components.svg" alt="Web Components icon" width="24" height="24">
Related icons in theSVG Color
Web Components icon in other icon sets
Web Components icon FAQ
Is the Web Components 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 Web Components icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:web-components" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Web Components icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/web-components.svg" alt="Web Components icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
