Cap icon
thesvg-color:cap
The Cap icon (thesvg-color:cap) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 500 × 500 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
- 500 × 500
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><g fill="none"><path fill="#4785ff" d="M250 492.424c133.887 0 242.424-108.537 242.424-242.424S383.887 7.576 250 7.576S7.576 116.113 7.576 250S116.113 492.424 250 492.424"/><path fill="#adc9ff" d="M250.001 446.97c108.783 0 196.969-88.186 196.969-196.969c0-108.785-88.186-196.97-196.969-196.97c-108.785 0-196.97 88.187-196.97 196.97S141.217 446.97 250 446.97"/><path fill="#fff" d="M249.999 401.515c83.679 0 151.516-67.837 151.516-151.516S333.678 98.485 249.999 98.485S98.485 166.32 98.485 249.999s67.835 151.516 151.514 151.516"/></g></svg>
How to use the Cap icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:cap" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:cap" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:cap" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--cap]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:cap"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:cap"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/cap.svg" alt="Cap icon" width="24" height="24">
Related icons in theSVG Color
Cap icon in other icon sets
Cap icon FAQ
Is the Cap 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 Cap icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:cap" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Cap icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/cap.svg" alt="Cap icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
