Home/Libraries/Fluent Emoji (Iconify)/ring

Fluent Emoji (Iconify)

Ring

License: MITCommercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iGpYXZc)"><path fill="#818cf8" fill-rule="evenodd" d="M11.844 8.234c.101.877-.235 1.368-.66 1.547h.006a10.56 10.56 0 0 0-6.206 9.625c0 5.834 4.73 10.563 10.563 10.563s10.562-4.73 10.562-10.563c0-4.298-2.567-7.997-6.253-9.646c-.381-.17-.723-.685-.626-1.526zm10.915 11.172a7.213 7.213 0 1 1-14.425 0a7.213 7.213 0 0 1 14.425 0" clip-rule="evenodd"/></g><path fill="url(#ipQBykd)" fill-rule="evenodd" d="M11.844 8.234c.101.877-.235 1.368-.66 1.547h.006a10.56 10.56 0 0 0-6.206 9.625c0 5.834 4.73 10.563 10.563 10.563s10.562-4.73 10.562-10.563c0-4.298-2.567-7.997-6.253-9.646c-.381-.17-.723-.685-.626-1.526zm10.915 11.172a7.213 7.213 0 1 1-14.425 0a7.213 7.213 0 0 1 14.425 0" clip-rule="evenodd"/><path fill="url(#iCTnuNb)" d="m11.86 8.313l-1.406-3.154a.4.4 0 0 1 .06-.421l2.106-2.5a.25.25 0 0 1 .192-.09h5.486a.25.25 0 0 1 .191.09l2.107 2.5a.4.4 0 0 1 .06.42L19.25 8.313z"/><path fill="url(#iKVjdAe)" d="m11.86 8.313l-1.406-3.154a.4.4 0 0 1 .06-.421l2.106-2.5a.25.25 0 0 1 .192-.09h5.486a.25.25 0 0 1 .191.09l2.107 2.5a.4.4 0 0 1 .06.42L19.25 8.313z"/><path fill="url(#iWB48ob)" d="m11.86 8.313l-1.406-3.154a.4.4 0 0 1 .06-.421l2.106-2.5a.25.25 0 0 1 .192-.09h5.486a.25.25 0 0 1 .191.09l2.107 2.5a.4.4 0 0 1 .06.42L19.25 8.313z"/><path fill="url(#iqX3XWb)" d="m10.454 5.159l1.405 3.154h7.391l1.406-3.154a.4.4 0 0 0 .01-.3H10.443a.4.4 0 0 0 .01.3"/><path fill="url(#iako4Me)" d="m10.454 5.159l1.405 3.154h7.391l1.406-3.154a.4.4 0 0 0 .01-.3H10.443a.4.4 0 0 0 .01.3"/><path fill="url(#igu4zte)" d="m10.454 5.159l1.405 3.154h7.391l1.406-3.154a.4.4 0 0 0 .01-.3H10.443a.4.4 0 0 0 .01.3"/><g filter="url(#i6AKPFX)"><circle cx="16" cy="19.102" r="8.891" stroke="url(#iVDZqKb)"/><circle cx="16" cy="19.102" r="8.891" stroke="url(#igVw7Cf)"/></g><defs><linearGradient id="iCTnuNb" x1="13.797" x2="19.891" y1="4.281" y2="4.281" gradientUnits="userSpaceOnUse"><stop stop-color="#47CCFF"/><stop offset=".641" stop-color="#2695DD"/><stop offset="1" stop-color="#3576A8"/></linearGradient><linearGradient id="iKVjdAe" x1="15.555" x2="15.555" y1="4.969" y2="4.672" gradientUnits="userSpaceOnUse"><stop offset=".368" stop-color="#32A5F6"/><stop offset="1" stop-color="#32A5F6" stop-opacity="0"/></linearGradient><linearGradient id="iWB48ob" x1="15.555" x2="15.555" y1="1.938" y2="2.313" gradientUnits="userSpaceOnUse"><stop stop-color="#2B9FD9"/><stop offset="1" stop-color="#2B9FD9" stop-opacity="0"/></linearGradient><linearGradient id="iqX3XWb" x1="11.547" x2="16.953" y1="7.844" y2="6.586" gradientUnits="userSpaceOnUse"><stop stop-color="#2C67CA"/><stop offset="1" stop-color="#2CB2FF"/></linearGradient><linearGradient id="iako4Me" x1="15.555" x2="15.555" y1="4.859" y2="5.016" gradientUnits="userSpaceOnUse"><stop stop-color="#32A5F6"/><stop offset="1" stop-color="#32A5F6" stop-opacity="0"/></linearGradient><linearGradient id="igVw7Cf" x1="7.609" x2="10.359" y1="25.688" y2="23.25" gradientUnits="userSpaceOnUse"><stop offset=".207" stop-color="#E3DFE9"/><stop offset="1" stop-color="#E3DFE9" stop-opacity="0"/></linearGradient><radialGradient id="ipQBykd" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.25 -4.125 0 15.547 7.688)" gradientUnits="userSpaceOnUse"><stop offset=".25" stop-color="#C0A4D9"/><stop offset="1" stop-color="#C0A4D9" stop-opacity="0"/></radialGradient><radialGradient id="igu4zte" cx="0" cy="0" r="1" gradientTransform="matrix(-3.21875 0 0 -.25 18.594 4.953)" gradientUnits="userSpaceOnUse"><stop offset=".286" stop-color="#51BBFD"/><stop offset="1" stop-color="#52B9FC" stop-opacity="0"/></radialGradient><radialGradient id="iVDZqKb" cx="0" cy="0" r="1" gradientTransform="matrix(-6.73434 4.64849 -5.05575 -7.32435 24.36 13.625)" gradientUnits="userSpaceOnUse"><stop offset=".36" stop-color="#E3DFE9"/><stop offset="1" stop-color="#E3DFE9" stop-opacity="0"/></radialGradient><filter id="iGpYXZc" width="23.125" height="22.634" x="3.984" y="7.484" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-1" dy=".15"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.87451 0 0 0 0 0.858824 0 0 0 0 0.905882 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_17726"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1" dy=".15"/><feGaussianBlur stdDeviation=".625"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.615686 0 0 0 0 0.603922 0 0 0 0 0.631373 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_17726" result="effect2_innerShadow_18_17726"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.75"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.756863 0 0 0 0 0.611765 0 0 0 0 0.878431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_17726" result="effect3_innerShadow_18_17726"/></filter><filter id="i6AKPFX" width="20.781" height="20.781" x="5.609" y="8.711" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_17726" stdDeviation=".5"/></filter></defs></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. RingIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.