life ring icon
life-ring from Line Awesome by Icons8 · Line · Spinners · Apache-2.0 Free for personal and commercial use.
- Name
- life-ring
- Set
- Line Awesome
- Style
- Line
- Category
- Spinners
- Viewbox
- 32×32
- License
- Apache 2.0
The same icon in other sets
More spinners icons from Line Awesome
Use the life ring icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12s12-5.383 12-12S22.617 4 16 4m0 2c.336 0 .672.031 1 .063v3.03A7 7 0 0 0 16 9c-.34 0-.672.047-1 .094V6.063A11 11 0 0 1 16 6m-3 .438v3.25A7 7 0 0 0 9.687 13H6.47A9.98 9.98 0 0 1 13 6.437zm6 0A10.07 10.07 0 0 1 25.563 13h-3.25A7 7 0 0 0 19 9.687zM16 11c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5m-9.938 4h3A7 7 0 0 0 9 16c0 .34.047.672.094 1H6.063A11 11 0 0 1 6 16c0-.336.031-.672.063-1zm16.844 0h3.032c.03.328.062.664.062 1s-.031.672-.063 1h-3.03c.046-.328.093-.66.093-1s-.047-.672-.094-1M6.438 19h3.25A7 7 0 0 0 13 22.313v3.25A10.07 10.07 0 0 1 6.437 19zm15.875 0h3.25A10.07 10.07 0 0 1 19 25.563v-3.25A7 7 0 0 0 22.313 19M15 22.906c.328.047.66.094 1 .094s.672-.047 1-.094v3.032A11 11 0 0 1 16 26c-.336 0-.672-.031-1-.063z"/></svg>
React
import type { SVGProps } from "react";
export function LaLifeRing(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12s12-5.383 12-12S22.617 4 16 4m0 2c.336 0 .672.031 1 .063v3.03A7 7 0 0 0 16 9c-.34 0-.672.047-1 .094V6.063A11 11 0 0 1 16 6m-3 .438v3.25A7 7 0 0 0 9.687 13H6.47A9.98 9.98 0 0 1 13 6.437zm6 0A10.07 10.07 0 0 1 25.563 13h-3.25A7 7 0 0 0 19 9.687zM16 11c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5m-9.938 4h3A7 7 0 0 0 9 16c0 .34.047.672.094 1H6.063A11 11 0 0 1 6 16c0-.336.031-.672.063-1zm16.844 0h3.032c.03.328.062.664.062 1s-.031.672-.063 1h-3.03c.046-.328.093-.66.093-1s-.047-.672-.094-1M6.438 19h3.25A7 7 0 0 0 13 22.313v3.25A10.07 10.07 0 0 1 6.437 19zm15.875 0h3.25A10.07 10.07 0 0 1 19 25.563v-3.25A7 7 0 0 0 22.313 19M15 22.906c.328.047.66.094 1 .094s.672-.047 1-.094v3.032A11 11 0 0 1 16 26c-.336 0-.672-.031-1-.063z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12s12-5.383 12-12S22.617 4 16 4m0 2c.336 0 .672.031 1 .063v3.03A7 7 0 0 0 16 9c-.34 0-.672.047-1 .094V6.063A11 11 0 0 1 16 6m-3 .438v3.25A7 7 0 0 0 9.687 13H6.47A9.98 9.98 0 0 1 13 6.437zm6 0A10.07 10.07 0 0 1 25.563 13h-3.25A7 7 0 0 0 19 9.687zM16 11c2.773 0 5 2.227 5 5s-2.227 5-5 5s-5-2.227-5-5s2.227-5 5-5m-9.938 4h3A7 7 0 0 0 9 16c0 .34.047.672.094 1H6.063A11 11 0 0 1 6 16c0-.336.031-.672.063-1zm16.844 0h3.032c.03.328.062.664.062 1s-.031.672-.063 1h-3.03c.046-.328.093-.66.093-1s-.047-.672-.094-1M6.438 19h3.25A7 7 0 0 0 13 22.313v3.25A10.07 10.07 0 0 1 6.437 19zm15.875 0h3.25A10.07 10.07 0 0 1 19 25.563v-3.25A7 7 0 0 0 22.313 19M15 22.906c.328.047.66.094 1 .094s.672-.047 1-.094v3.032A11 11 0 0 1 16 26c-.336 0-.672-.031-1-.063z"/></svg> </template>
CSS
.icon-life-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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%204C9.383%204%204%209.383%204%2016s5.383%2012%2012%2012s12-5.383%2012-12S22.617%204%2016%204m0%202c.336%200%20.672.031%201%20.063v3.03A7%207%200%200%200%2016%209c-.34%200-.672.047-1%20.094V6.063A11%2011%200%200%201%2016%206m-3%20.438v3.25A7%207%200%200%200%209.687%2013H6.47A9.98%209.98%200%200%201%2013%206.437zm6%200A10.07%2010.07%200%200%201%2025.563%2013h-3.25A7%207%200%200%200%2019%209.687zM16%2011c2.773%200%205%202.227%205%205s-2.227%205-5%205s-5-2.227-5-5s2.227-5%205-5m-9.938%204h3A7%207%200%200%200%209%2016c0%20.34.047.672.094%201H6.063A11%2011%200%200%201%206%2016c0-.336.031-.672.063-1zm16.844%200h3.032c.03.328.062.664.062%201s-.031.672-.063%201h-3.03c.046-.328.093-.66.093-1s-.047-.672-.094-1M6.438%2019h3.25A7%207%200%200%200%2013%2022.313v3.25A10.07%2010.07%200%200%201%206.437%2019zm15.875%200h3.25A10.07%2010.07%200%200%201%2019%2025.563v-3.25A7%207%200%200%200%2022.313%2019M15%2022.906c.328.047.66.094%201%20.094s.672-.047%201-.094v3.032A11%2011%200%200%201%2016%2026c-.336%200-.672-.031-1-.063z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%204C9.383%204%204%209.383%204%2016s5.383%2012%2012%2012s12-5.383%2012-12S22.617%204%2016%204m0%202c.336%200%20.672.031%201%20.063v3.03A7%207%200%200%200%2016%209c-.34%200-.672.047-1%20.094V6.063A11%2011%200%200%201%2016%206m-3%20.438v3.25A7%207%200%200%200%209.687%2013H6.47A9.98%209.98%200%200%201%2013%206.437zm6%200A10.07%2010.07%200%200%201%2025.563%2013h-3.25A7%207%200%200%200%2019%209.687zM16%2011c2.773%200%205%202.227%205%205s-2.227%205-5%205s-5-2.227-5-5s2.227-5%205-5m-9.938%204h3A7%207%200%200%200%209%2016c0%20.34.047.672.094%201H6.063A11%2011%200%200%201%206%2016c0-.336.031-.672.063-1zm16.844%200h3.032c.03.328.062.664.062%201s-.031.672-.063%201h-3.03c.046-.328.093-.66.093-1s-.047-.672-.094-1M6.438%2019h3.25A7%207%200%200%200%2013%2022.313v3.25A10.07%2010.07%200%200%201%206.437%2019zm15.875%200h3.25A10.07%2010.07%200%200%201%2019%2025.563v-3.25A7%207%200%200%200%2022.313%2019M15%2022.906c.328.047.66.094%201%20.094s.672-.047%201-.094v3.032A11%2011%200%200%201%2016%2026c-.336%200-.672-.031-1-.063z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/life-ring.svg?color=%231a73e8&size=48
