buoy icon
buoy from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- buoy
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-buoy
The same icon in other sets
Use the buoy icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m7.411 7H16v.031A5 5 0 0 0 14.969 8H15V4.589A8.04 8.04 0 0 1 19.411 9M12 15c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3m1-10.931v3.032a5 5 0 0 0-2 0V4.069c.328-.041.66-.069 1-.069s.672.028 1 .069m-4 .52V8h.031A5 5 0 0 0 8 9.031V9H4.589C5.402 7 6.999 5.402 9 4.589M4.069 11h3.032a5 5 0 0 0 .001 2H4.069C4.028 12.672 4 12.339 4 12s.028-.672.069-1m.52 4H8v-.031c.284.381.621.718 1 1.005v3.437A8.04 8.04 0 0 1 4.589 15M11 19.931v-3.032a5 5 0 0 0 2 0v3.032c-.328.041-.66.069-1 .069s-.672-.028-1-.069m4-.52v-3.437a5 5 0 0 0 1-1.005V15h3.411A8.04 8.04 0 0 1 15 19.411M19.931 13h-3.032a5 5 0 0 0-.001-2h3.032c.042.328.07.661.07 1s-.028.672-.069 1"/></svg>
React
import type { SVGProps } from "react";
export function BxBuoy(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m7.411 7H16v.031A5 5 0 0 0 14.969 8H15V4.589A8.04 8.04 0 0 1 19.411 9M12 15c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3m1-10.931v3.032a5 5 0 0 0-2 0V4.069c.328-.041.66-.069 1-.069s.672.028 1 .069m-4 .52V8h.031A5 5 0 0 0 8 9.031V9H4.589C5.402 7 6.999 5.402 9 4.589M4.069 11h3.032a5 5 0 0 0 .001 2H4.069C4.028 12.672 4 12.339 4 12s.028-.672.069-1m.52 4H8v-.031c.284.381.621.718 1 1.005v3.437A8.04 8.04 0 0 1 4.589 15M11 19.931v-3.032a5 5 0 0 0 2 0v3.032c-.328.041-.66.069-1 .069s-.672-.028-1-.069m4-.52v-3.437a5 5 0 0 0 1-1.005V15h3.411A8.04 8.04 0 0 1 15 19.411M19.931 13h-3.032a5 5 0 0 0-.001-2h3.032c.042.328.07.661.07 1s-.028.672-.069 1"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2m7.411 7H16v.031A5 5 0 0 0 14.969 8H15V4.589A8.04 8.04 0 0 1 19.411 9M12 15c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3m1-10.931v3.032a5 5 0 0 0-2 0V4.069c.328-.041.66-.069 1-.069s.672.028 1 .069m-4 .52V8h.031A5 5 0 0 0 8 9.031V9H4.589C5.402 7 6.999 5.402 9 4.589M4.069 11h3.032a5 5 0 0 0 .001 2H4.069C4.028 12.672 4 12.339 4 12s.028-.672.069-1m.52 4H8v-.031c.284.381.621.718 1 1.005v3.437A8.04 8.04 0 0 1 4.589 15M11 19.931v-3.032a5 5 0 0 0 2 0v3.032c-.328.041-.66.069-1 .069s-.672-.028-1-.069m4-.52v-3.437a5 5 0 0 0 1-1.005V15h3.411A8.04 8.04 0 0 1 15 19.411M19.931 13h-3.032a5 5 0 0 0-.001-2h3.032c.042.328.07.661.07 1s-.028.672-.069 1"/></svg> </template>
CSS
.icon-buoy {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202C6.486%202%202%206.486%202%2012s4.486%2010%2010%2010s10-4.486%2010-10S17.514%202%2012%202m7.411%207H16v.031A5%205%200%200%200%2014.969%208H15V4.589A8.04%208.04%200%200%201%2019.411%209M12%2015c-1.654%200-3-1.346-3-3s1.346-3%203-3s3%201.346%203%203s-1.346%203-3%203m1-10.931v3.032a5%205%200%200%200-2%200V4.069c.328-.041.66-.069%201-.069s.672.028%201%20.069m-4%20.52V8h.031A5%205%200%200%200%208%209.031V9H4.589C5.402%207%206.999%205.402%209%204.589M4.069%2011h3.032a5%205%200%200%200%20.001%202H4.069C4.028%2012.672%204%2012.339%204%2012s.028-.672.069-1m.52%204H8v-.031c.284.381.621.718%201%201.005v3.437A8.04%208.04%200%200%201%204.589%2015M11%2019.931v-3.032a5%205%200%200%200%202%200v3.032c-.328.041-.66.069-1%20.069s-.672-.028-1-.069m4-.52v-3.437a5%205%200%200%200%201-1.005V15h3.411A8.04%208.04%200%200%201%2015%2019.411M19.931%2013h-3.032a5%205%200%200%200-.001-2h3.032c.042.328.07.661.07%201s-.028.672-.069%201%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202C6.486%202%202%206.486%202%2012s4.486%2010%2010%2010s10-4.486%2010-10S17.514%202%2012%202m7.411%207H16v.031A5%205%200%200%200%2014.969%208H15V4.589A8.04%208.04%200%200%201%2019.411%209M12%2015c-1.654%200-3-1.346-3-3s1.346-3%203-3s3%201.346%203%203s-1.346%203-3%203m1-10.931v3.032a5%205%200%200%200-2%200V4.069c.328-.041.66-.069%201-.069s.672.028%201%20.069m-4%20.52V8h.031A5%205%200%200%200%208%209.031V9H4.589C5.402%207%206.999%205.402%209%204.589M4.069%2011h3.032a5%205%200%200%200%20.001%202H4.069C4.028%2012.672%204%2012.339%204%2012s.028-.672.069-1m.52%204H8v-.031c.284.381.621.718%201%201.005v3.437A8.04%208.04%200%200%201%204.589%2015M11%2019.931v-3.032a5%205%200%200%200%202%200v3.032c-.328.041-.66.069-1%20.069s-.672-.028-1-.069m4-.52v-3.437a5%205%200%200%200%201-1.005V15h3.411A8.04%208.04%200%200%201%2015%2019.411M19.931%2013h-3.032a5%205%200%200%200-.001-2h3.032c.042.328.07.661.07%201s-.028.672-.069%201%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/buoy.svg?color=%231a73e8&size=48
