ring icon
ring from IconPark Solid by ByteDance · Solid · Connect · Apache-2.0 Free for personal and commercial use.
- Name
- ring
- Set
- IconPark Solid
- Style
- Solid
- Category
- Connect
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
ringEmoji One (Colored)ringFont Awesome 6 SolidringFont Awesome SolidringFluent EmojiringFluent Emoji FlatringFluent Emoji High ContrastringFirefox OS Emojiringcss.ggringIconParkringIconPark OutlineringIconPark TwoToneringLine AwesomeringMaterial Design IconsringNoto EmojiringOpenMojiringSimple IconsringWeb3 IconsringWeb3 Icons BrandedringTwitter Emoji
More connect icons from IconPark Solid
Use the ring icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path fill="currentColor" d="M24 11.619c2.093 0 3.79-1.706 3.79-3.81S26.093 4 24 4s-3.79 1.706-3.79 3.81s1.697 3.809 3.79 3.809ZM9.79 40.19c2.092 0 3.789-1.705 3.789-3.809s-1.697-3.81-3.79-3.81S6 34.278 6 36.382s1.697 3.81 3.79 3.81Zm28.42 0c2.093 0 3.79-1.705 3.79-3.809s-1.697-3.81-3.79-3.81s-3.79 1.706-3.79 3.81s1.697 3.81 3.79 3.81Z"/><path stroke-linecap="round" d="M33.143 10.314A18.1 18.1 0 0 1 42 25.904q0 .867-.08 1.711v0m-10.906 14.96A17.9 17.9 0 0 1 24 44c-2.488 0-4.858-.507-7.014-1.425M6.08 27.615a18 18 0 0 1-.08-1.71a18.1 18.1 0 0 1 8.857-15.59"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkSolidRing(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="4"><path fill="currentColor" d="M24 11.619c2.093 0 3.79-1.706 3.79-3.81S26.093 4 24 4s-3.79 1.706-3.79 3.81s1.697 3.809 3.79 3.809ZM9.79 40.19c2.092 0 3.789-1.705 3.789-3.809s-1.697-3.81-3.79-3.81S6 34.278 6 36.382s1.697 3.81 3.79 3.81Zm28.42 0c2.093 0 3.79-1.705 3.79-3.809s-1.697-3.81-3.79-3.81s-3.79 1.706-3.79 3.81s1.697 3.81 3.79 3.81Z"/><path strokeLinecap="round" d="M33.143 10.314A18.1 18.1 0 0 1 42 25.904q0 .867-.08 1.711v0m-10.906 14.96A17.9 17.9 0 0 1 24 44c-2.488 0-4.858-.507-7.014-1.425M6.08 27.615a18 18 0 0 1-.08-1.71a18.1 18.1 0 0 1 8.857-15.59"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path fill="currentColor" d="M24 11.619c2.093 0 3.79-1.706 3.79-3.81S26.093 4 24 4s-3.79 1.706-3.79 3.81s1.697 3.809 3.79 3.809ZM9.79 40.19c2.092 0 3.789-1.705 3.789-3.809s-1.697-3.81-3.79-3.81S6 34.278 6 36.382s1.697 3.81 3.79 3.81Zm28.42 0c2.093 0 3.79-1.705 3.79-3.809s-1.697-3.81-3.79-3.81s-3.79 1.706-3.79 3.81s1.697 3.81 3.79 3.81Z"/><path stroke-linecap="round" d="M33.143 10.314A18.1 18.1 0 0 1 42 25.904q0 .867-.08 1.711v0m-10.906 14.96A17.9 17.9 0 0 1 24 44c-2.488 0-4.858-.507-7.014-1.425M6.08 27.615a18 18 0 0 1-.08-1.71a18.1 18.1 0 0 1 8.857-15.59"/></g></svg> </template>
CSS
.icon-ring {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2011.619c2.093%200%203.79-1.706%203.79-3.81S26.093%204%2024%204s-3.79%201.706-3.79%203.81s1.697%203.809%203.79%203.809ZM9.79%2040.19c2.092%200%203.789-1.705%203.789-3.809s-1.697-3.81-3.79-3.81S6%2034.278%206%2036.382s1.697%203.81%203.79%203.81Zm28.42%200c2.093%200%203.79-1.705%203.79-3.809s-1.697-3.81-3.79-3.81s-3.79%201.706-3.79%203.81s1.697%203.81%203.79%203.81Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M33.143%2010.314A18.1%2018.1%200%200%201%2042%2025.904q0%20.867-.08%201.711v0m-10.906%2014.96A17.9%2017.9%200%200%201%2024%2044c-2.488%200-4.858-.507-7.014-1.425M6.08%2027.615a18%2018%200%200%201-.08-1.71a18.1%2018.1%200%200%201%208.857-15.59%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2011.619c2.093%200%203.79-1.706%203.79-3.81S26.093%204%2024%204s-3.79%201.706-3.79%203.81s1.697%203.809%203.79%203.809ZM9.79%2040.19c2.092%200%203.789-1.705%203.789-3.809s-1.697-3.81-3.79-3.81S6%2034.278%206%2036.382s1.697%203.81%203.79%203.81Zm28.42%200c2.093%200%203.79-1.705%203.79-3.809s-1.697-3.81-3.79-3.81s-3.79%201.706-3.79%203.81s1.697%203.81%203.79%203.81Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M33.143%2010.314A18.1%2018.1%200%200%201%2042%2025.904q0%20.867-.08%201.711v0m-10.906%2014.96A17.9%2017.9%200%200%201%2024%2044c-2.488%200-4.858-.507-7.014-1.425M6.08%2027.615a18%2018%200%200%201-.08-1.71a18.1%2018.1%200%200%201%208.857-15.59%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park-solid/ring.svg?color=%231a73e8&size=48
