ring icon

ring from Font Awesome 6 Solid by Dave Gandy · Regular · Objects · CC-BY-4.0 Attribution required.

Name
ring
Set
Font Awesome 6 Solid
Style
Regular
Category
Objects
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

ringEmoji One (Colored)ringFont Awesome SolidringFluent EmojiringFluent Emoji FlatringFluent Emoji High ContrastringFirefox OS Emojiringcss.ggringIconParkringIconPark OutlineringIconPark SolidringIconPark TwoToneringLine AwesomeringMaterial Design IconsringNoto EmojiringOpenMojiringSimple IconsringWeb3 IconsringWeb3 Icons BrandedringTwitter Emoji

More objects icons from Font Awesome 6 Solid

cubecubesfutbolgemlocklock-openmoonscrolltoiletunlock

Use the ring icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M64 208c0 7.8 4.4 18.7 17.1 30.3C126.5 214.1 188.9 200 256 200s129.5 14.1 174.9 38.3c12.7-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C364.9 139.8 314 128 256 128s-108.9 11.8-144.1 29.4C74.8 176 64 195.7 64 208m192 40c-47 0-89.3 7.6-122.9 19.7C166.3 280.2 208.8 288 256 288s89.7-7.8 122.9-20.3C345.3 255.6 303 248 256 248M0 208c0-49.6 39.4-85.8 83.3-107.8C129.1 77.3 190.3 64 256 64s126.9 13.3 172.7 36.2c43.9 22 83.3 58.2 83.3 107.8v96c0 49.6-39.4 85.8-83.3 107.8c-45.8 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C39.4 389.8 0 353.6 0 304z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidRing(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M64 208c0 7.8 4.4 18.7 17.1 30.3C126.5 214.1 188.9 200 256 200s129.5 14.1 174.9 38.3c12.7-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C364.9 139.8 314 128 256 128s-108.9 11.8-144.1 29.4C74.8 176 64 195.7 64 208m192 40c-47 0-89.3 7.6-122.9 19.7C166.3 280.2 208.8 288 256 288s89.7-7.8 122.9-20.3C345.3 255.6 303 248 256 248M0 208c0-49.6 39.4-85.8 83.3-107.8C129.1 77.3 190.3 64 256 64s126.9 13.3 172.7 36.2c43.9 22 83.3 58.2 83.3 107.8v96c0 49.6-39.4 85.8-83.3 107.8c-45.8 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C39.4 389.8 0 353.6 0 304z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M64 208c0 7.8 4.4 18.7 17.1 30.3C126.5 214.1 188.9 200 256 200s129.5 14.1 174.9 38.3c12.7-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C364.9 139.8 314 128 256 128s-108.9 11.8-144.1 29.4C74.8 176 64 195.7 64 208m192 40c-47 0-89.3 7.6-122.9 19.7C166.3 280.2 208.8 288 256 288s89.7-7.8 122.9-20.3C345.3 255.6 303 248 256 248M0 208c0-49.6 39.4-85.8 83.3-107.8C129.1 77.3 190.3 64 256 64s126.9 13.3 172.7 36.2c43.9 22 83.3 58.2 83.3 107.8v96c0 49.6-39.4 85.8-83.3 107.8c-45.8 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C39.4 389.8 0 353.6 0 304z"/></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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%20208c0%207.8%204.4%2018.7%2017.1%2030.3C126.5%20214.1%20188.9%20200%20256%20200s129.5%2014.1%20174.9%2038.3c12.7-11.6%2017.1-22.5%2017.1-30.3c0-12.3-10.8-32-47.9-50.6C364.9%20139.8%20314%20128%20256%20128s-108.9%2011.8-144.1%2029.4C74.8%20176%2064%20195.7%2064%20208m192%2040c-47%200-89.3%207.6-122.9%2019.7C166.3%20280.2%20208.8%20288%20256%20288s89.7-7.8%20122.9-20.3C345.3%20255.6%20303%20248%20256%20248M0%20208c0-49.6%2039.4-85.8%2083.3-107.8C129.1%2077.3%20190.3%2064%20256%2064s126.9%2013.3%20172.7%2036.2c43.9%2022%2083.3%2058.2%2083.3%20107.8v96c0%2049.6-39.4%2085.8-83.3%20107.8c-45.8%2022.9-107%2036.2-172.7%2036.2s-126.9-13.3-172.7-36.2C39.4%20389.8%200%20353.6%200%20304z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%20208c0%207.8%204.4%2018.7%2017.1%2030.3C126.5%20214.1%20188.9%20200%20256%20200s129.5%2014.1%20174.9%2038.3c12.7-11.6%2017.1-22.5%2017.1-30.3c0-12.3-10.8-32-47.9-50.6C364.9%20139.8%20314%20128%20256%20128s-108.9%2011.8-144.1%2029.4C74.8%20176%2064%20195.7%2064%20208m192%2040c-47%200-89.3%207.6-122.9%2019.7C166.3%20280.2%20208.8%20288%20256%20288s89.7-7.8%20122.9-20.3C345.3%20255.6%20303%20248%20256%20248M0%20208c0-49.6%2039.4-85.8%2083.3-107.8C129.1%2077.3%20190.3%2064%20256%2064s126.9%2013.3%20172.7%2036.2c43.9%2022%2083.3%2058.2%2083.3%20107.8v96c0%2049.6-39.4%2085.8-83.3%20107.8c-45.8%2022.9-107%2036.2-172.7%2036.2s-126.9-13.3-172.7-36.2C39.4%20389.8%200%20353.6%200%20304z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/ring.svg?color=%231a73e8&size=48