Swimming Ring
The swimming-ring icon represents a device used for buoyancy and safety in water.
Exports at 24 × 24 px
Code
Swimming Ring in your framework
In any framework. Customize it above, and the code follows.
export const SwimmingRingIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" {...props}>
<g fill="none" stroke="#000" strokeWidth="4"><path strokeLinecap="round" d="M28 33.1679C30.3069 32.16 32.16 30.3069 33.1679 28"/><path strokeLinecap="round" d="M14.832 28C15.84 30.3069 17.6931 32.16 19.9999 33.1679"/><path strokeLinecap="round" d="M19.9999 14.832C17.6931 15.84 15.84 17.6931 14.832 19.9999"/><path strokeLinecap="round" d="M28 14.832C30.3069 15.84 32.16 17.6931 33.1679 19.9999"/><path strokeLinecap="round" d="M30 40.9758C35.1145 39.1681 39.1681 35.1145 40.9758 30"/><path strokeLinecap="round" d="M7.02441 30C8.83212 35.1145 12.8857 39.1681 18.0002 40.9758"/><path strokeLinecap="round" d="M18.0002 7.02441C12.8857 8.83212 8.83212 12.8857 7.02441 18.0002"/><path strokeLinecap="round" d="M30 7.02441C35.1145 8.83212 39.1681 12.8857 40.9758 18.0002"/><path fill="#2F88FF" strokeLinejoin="round" strokeMiterlimit="2" d="M27 17H21L18 7L20 4H28L30 7L27 17Z"/><path fill="#2F88FF" strokeLinejoin="round" strokeMiterlimit="2" d="M17 21V27L7 30L4 28L4 20L7 18L17 21Z"/><path fill="#2F88FF" strokeLinejoin="round" strokeMiterlimit="2" d="M21 31H27L30 41L28 44H20L18 41L21 31Z"/><path fill="#2F88FF" strokeLinejoin="round" strokeMiterlimit="2" d="M31 27V21L41 18C42.08 18.8 42.92 19.2 44 20V28C42.92 28.8 42.08 29.2 41 30L31 27Z"/></g>
</svg>
);Other libraries
Swimming Ring in 3 more libraries
Each library draws it its own way. Open one to compare.
IconPark
More like it
Icons that share its tags, in the same style.
Search IconPark
Skip the copy and paste. With Pro, your AI agent finds and installs any IconPark icon from a prompt.
Get ProTags
Browse by tag
Swimming Ring is tagged UI, multicolor, safety and 3 more. Related tags follow; each opens its icons from every library.
Pricing
IconPark MCP, with Pro
Ask for Swimming Ring or any of 2,658 IconPark icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Swimming Ring icon means and where it's used, then how to install, style, label and license it.
What does the Swimming Ring icon mean?
The swimming-ring icon represents a device used for buoyancy and safety in water. Swimming rings are commonly used by swimmers, especially children, to assist with floating and learning to swim.
Where is the Swimming Ring icon used?
In real-world applications, swimming-ring icons are often used in software related to recreation, leisure, and sports. For example, users can find swimming-ring icons in apps like Swim University, Pool Cop, or Recreation Center.
What does the Swimming Ring icon tell users?
From a UX perspective, the swimming-ring icon communicates a sense of safety, fun, and recreation, helping users understand the context or theme of a feature or device. It can be used to provide visual feedback, indicate status, or draw attention.
Which library is the Swimming Ring icon from?
Swimming Ring is one of 2,658 icons in IconPark, made by ByteDance and released under Apache 2.0. It is drawn on a 48 × 48 grid.
How do I install the Swimming Ring icon with the shadcn CLI?
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds SwimmingRingIcon to components/icons/icon-park-swimming-ring.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
How do I use the Swimming Ring icon in Next.js or React?
Copy it as React (from Get icon, or the Code section): a typed SwimmingRingIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
How do I use the Swimming Ring icon in Vue, Svelte or Angular?
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
Can my AI agent install the Swimming Ring icon for me?
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Swimming Ring icon, or any of 2,658 IconPark icons, and install it from a prompt.
How do I change the color of the Swimming Ring icon?
It's multicolor, so it keeps its own colors.
How do I change the size of the Swimming Ring icon?
Set width and height on the component, or a class like size-6. It's drawn on a 48 × 48 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Does the Swimming Ring icon work in dark mode?
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
How do I make the Swimming Ring icon accessible?
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Swimming Ring", so screen readers say what it does.
Can I pass aria-hidden or aria-label to the Swimming Ring icon?
Yes. SwimmingRingIcon passes every SVG prop to the svg element, so <SwimmingRingIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Can I download the Swimming Ring icon as SVG or PNG?
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
Can I use the Swimming Ring icon in commercial projects?
Yes. Apache 2.0 allows commercial use; keep the license notice when you ship the icons' source files. The full terms are in the license, linked on this page.
Do I have to credit the author of the Swimming Ring icon?
No visible credit is required: Apache 2.0 only asks that you keep the license notice if you ship the icons' source files. Icons installed with the shadcn CLI already start with a comment naming IconPark, ByteDance and the license.
Is the Swimming Ring icon free?
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Which other libraries have the Swimming Ring icon?
3 other libraries draw an icon called Swimming Ring. The Other libraries section on this page shows each one, so you can compare them and open the one that fits your style.
What tags does the Swimming Ring icon have?
Its tags are UI, multicolor, safety, sports, leisure and water. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Swimming Ring in another set.
4.9 out of 5 from 150+ developers
Install Swimming Ring from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro
- Cancel anytime
- Keep what you've shipped