ring icon
ring from IconPark TwoTone by ByteDance · Two tone · Connect · Apache-2.0 Free for personal and commercial use.
- Name
- ring
- Set
- IconPark TwoTone
- Style
- Two tone
- 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 SolidringLine AwesomeringMaterial Design IconsringNoto EmojiringOpenMojiringSimple IconsringWeb3 IconsringWeb3 Icons BrandedringTwitter Emoji
More connect icons from IconPark TwoTone
Use the ring icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGndQR5c2x1"><g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4"><path fill="#555" 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></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGndQR5c2x1)"/></svg>
React
import type { SVGProps } from "react";
export function IconParkTwotoneRing(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGndQR5c2x1"><g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4"><path fill="#555" 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></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGndQR5c2x1)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><defs><mask id="SVGndQR5c2x1"><g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4"><path fill="#555" 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></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGndQR5c2x1)"/></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%3Cdefs%3E%3Cmask%20id%3D%22SVGndQR5c2x1%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%23555%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%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h48v48H0z%22%20mask%3D%22url(%23SVGndQR5c2x1)%22%2F%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%3Cdefs%3E%3Cmask%20id%3D%22SVGndQR5c2x1%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%23555%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%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%200h48v48H0z%22%20mask%3D%22url(%23SVGndQR5c2x1)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park-twotone/ring.svg?color=%231a73e8&size=48
