ring icon
ring from IconPark Outline by ByteDance · Outline · Connect · Apache-2.0 Free for personal and commercial use.
- Name
- ring
- Set
- IconPark Outline
- Style
- Outline
- 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 SolidringIconPark TwoToneringLine AwesomeringMaterial Design IconsringNoto EmojiringOpenMojiringSimple IconsringWeb3 IconsringWeb3 Icons BrandedringTwitter Emoji
More connect icons from IconPark Outline
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 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 IconParkOutlineRing(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 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 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%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%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-outline/ring.svg?color=%231a73e8&size=48
