ring icon

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

Name
ring
Set
Font Awesome Solid
Style
Solid
Category
Objects
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

ringEmoji One (Colored)ringFont Awesome 6 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 Solid

cubecubesdigital-tachographfutbolgemheart-brokenlocklock-openmoonscrollspace-shuttletoiletunlockunlock-alt

Use the ring icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M128 272c0 7.8 4.4 18.7 17.1 30.3C190.5 278.1 252.8 264 320 264s129.5 14.1 174.9 38.3c12.8-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C428.9 203.8 378 192 320 192s-108.9 11.8-144.1 29.4C138.8 240 128 259.7 128 272m192 40c-47 0-89.3 7.6-122.9 19.7C230.3 344.1 272.8 352 320 352s89.7-7.8 122.9-20.3C409.3 319.6 367 312 320 312M64 272c0-49.6 39.4-85.8 83.3-107.8c45.8-22.9 107-36.2 172.7-36.2s126.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.9 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C103.4 453.8 64 417.6 64 368z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidRing(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M128 272c0 7.8 4.4 18.7 17.1 30.3C190.5 278.1 252.8 264 320 264s129.5 14.1 174.9 38.3c12.8-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C428.9 203.8 378 192 320 192s-108.9 11.8-144.1 29.4C138.8 240 128 259.7 128 272m192 40c-47 0-89.3 7.6-122.9 19.7C230.3 344.1 272.8 352 320 352s89.7-7.8 122.9-20.3C409.3 319.6 367 312 320 312M64 272c0-49.6 39.4-85.8 83.3-107.8c45.8-22.9 107-36.2 172.7-36.2s126.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.9 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C103.4 453.8 64 417.6 64 368z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M128 272c0 7.8 4.4 18.7 17.1 30.3C190.5 278.1 252.8 264 320 264s129.5 14.1 174.9 38.3c12.8-11.6 17.1-22.5 17.1-30.3c0-12.3-10.8-32-47.9-50.6C428.9 203.8 378 192 320 192s-108.9 11.8-144.1 29.4C138.8 240 128 259.7 128 272m192 40c-47 0-89.3 7.6-122.9 19.7C230.3 344.1 272.8 352 320 352s89.7-7.8 122.9-20.3C409.3 319.6 367 312 320 312M64 272c0-49.6 39.4-85.8 83.3-107.8c45.8-22.9 107-36.2 172.7-36.2s126.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.9 22.9-107 36.2-172.7 36.2s-126.9-13.3-172.7-36.2C103.4 453.8 64 417.6 64 368z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20272c0%207.8%204.4%2018.7%2017.1%2030.3C190.5%20278.1%20252.8%20264%20320%20264s129.5%2014.1%20174.9%2038.3c12.8-11.6%2017.1-22.5%2017.1-30.3c0-12.3-10.8-32-47.9-50.6C428.9%20203.8%20378%20192%20320%20192s-108.9%2011.8-144.1%2029.4C138.8%20240%20128%20259.7%20128%20272m192%2040c-47%200-89.3%207.6-122.9%2019.7C230.3%20344.1%20272.8%20352%20320%20352s89.7-7.8%20122.9-20.3C409.3%20319.6%20367%20312%20320%20312M64%20272c0-49.6%2039.4-85.8%2083.3-107.8c45.8-22.9%20107-36.2%20172.7-36.2s126.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.9%2022.9-107%2036.2-172.7%2036.2s-126.9-13.3-172.7-36.2C103.4%20453.8%2064%20417.6%2064%20368z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20272c0%207.8%204.4%2018.7%2017.1%2030.3C190.5%20278.1%20252.8%20264%20320%20264s129.5%2014.1%20174.9%2038.3c12.8-11.6%2017.1-22.5%2017.1-30.3c0-12.3-10.8-32-47.9-50.6C428.9%20203.8%20378%20192%20320%20192s-108.9%2011.8-144.1%2029.4C138.8%20240%20128%20259.7%20128%20272m192%2040c-47%200-89.3%207.6-122.9%2019.7C230.3%20344.1%20272.8%20352%20320%20352s89.7-7.8%20122.9-20.3C409.3%20319.6%20367%20312%20320%20312M64%20272c0-49.6%2039.4-85.8%2083.3-107.8c45.8-22.9%20107-36.2%20172.7-36.2s126.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.9%2022.9-107%2036.2-172.7%2036.2s-126.9-13.3-172.7-36.2C103.4%20453.8%2064%20417.6%2064%20368z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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