beach ball icon

beach-ball-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name
beach-ball-bold
Set
Phosphor
Style
Bold
Viewbox
256×256
License
MIT

5 other variants in Phosphor

beach-ballbeach-ball-duotonebeach-ball-fillbeach-ball-lightbeach-ball-thin

The same icon in other sets

beach-ballLucide Lab

Use the beach ball icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m84 108a84.3 84.3 0 0 1-1.32 14.74a205 205 0 0 0-18.52-31.49a177 177 0 0 1 19.08 5.62A85 85 0 0 1 212 128m-9.61-38.94a204 204 0 0 0-30-5.47a204 204 0 0 0-5.47-30a84.53 84.53 0 0 1 35.47 35.47m-63.26-44.3a177 177 0 0 1 5.62 19.08a205 205 0 0 0-31.49-18.52a82.5 82.5 0 0 1 25.87-.56m-58.06 13.6a179.8 179.8 0 0 1 49.8 25.06a204.2 204.2 0 0 0-85.23 28.05a84.23 84.23 0 0 1 35.43-53.11M45 140.65a180.2 180.2 0 0 1 104.62-34.22a180.2 180.2 0 0 1-34.22 104.62a84.22 84.22 0 0 1-70.4-70.4m99.58 69.71a204.2 204.2 0 0 0 28.05-85.23a179.8 179.8 0 0 1 25.06 49.8a84.23 84.23 0 0 1-53.16 35.43Z"/></svg>

React

import type { SVGProps } from "react";

export function PhBeachBallBold(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m84 108a84.3 84.3 0 0 1-1.32 14.74a205 205 0 0 0-18.52-31.49a177 177 0 0 1 19.08 5.62A85 85 0 0 1 212 128m-9.61-38.94a204 204 0 0 0-30-5.47a204 204 0 0 0-5.47-30a84.53 84.53 0 0 1 35.47 35.47m-63.26-44.3a177 177 0 0 1 5.62 19.08a205 205 0 0 0-31.49-18.52a82.5 82.5 0 0 1 25.87-.56m-58.06 13.6a179.8 179.8 0 0 1 49.8 25.06a204.2 204.2 0 0 0-85.23 28.05a84.23 84.23 0 0 1 35.43-53.11M45 140.65a180.2 180.2 0 0 1 104.62-34.22a180.2 180.2 0 0 1-34.22 104.62a84.22 84.22 0 0 1-70.4-70.4m99.58 69.71a204.2 204.2 0 0 0 28.05-85.23a179.8 179.8 0 0 1 25.06 49.8a84.23 84.23 0 0 1-53.16 35.43Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a108 108 0 1 0 108 108A108.12 108.12 0 0 0 128 20m84 108a84.3 84.3 0 0 1-1.32 14.74a205 205 0 0 0-18.52-31.49a177 177 0 0 1 19.08 5.62A85 85 0 0 1 212 128m-9.61-38.94a204 204 0 0 0-30-5.47a204 204 0 0 0-5.47-30a84.53 84.53 0 0 1 35.47 35.47m-63.26-44.3a177 177 0 0 1 5.62 19.08a205 205 0 0 0-31.49-18.52a82.5 82.5 0 0 1 25.87-.56m-58.06 13.6a179.8 179.8 0 0 1 49.8 25.06a204.2 204.2 0 0 0-85.23 28.05a84.23 84.23 0 0 1 35.43-53.11M45 140.65a180.2 180.2 0 0 1 104.62-34.22a180.2 180.2 0 0 1-34.22 104.62a84.22 84.22 0 0 1-70.4-70.4m99.58 69.71a204.2 204.2 0 0 0 28.05-85.23a179.8 179.8 0 0 1 25.06 49.8a84.23 84.23 0 0 1-53.16 35.43Z"/></svg>
</template>

CSS

.icon-beach-ball-bold {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2020a108%20108%200%201%200%20108%20108A108.12%20108.12%200%200%200%20128%2020m84%20108a84.3%2084.3%200%200%201-1.32%2014.74a205%20205%200%200%200-18.52-31.49a177%20177%200%200%201%2019.08%205.62A85%2085%200%200%201%20212%20128m-9.61-38.94a204%20204%200%200%200-30-5.47a204%20204%200%200%200-5.47-30a84.53%2084.53%200%200%201%2035.47%2035.47m-63.26-44.3a177%20177%200%200%201%205.62%2019.08a205%20205%200%200%200-31.49-18.52a82.5%2082.5%200%200%201%2025.87-.56m-58.06%2013.6a179.8%20179.8%200%200%201%2049.8%2025.06a204.2%20204.2%200%200%200-85.23%2028.05a84.23%2084.23%200%200%201%2035.43-53.11M45%20140.65a180.2%20180.2%200%200%201%20104.62-34.22a180.2%20180.2%200%200%201-34.22%20104.62a84.22%2084.22%200%200%201-70.4-70.4m99.58%2069.71a204.2%20204.2%200%200%200%2028.05-85.23a179.8%20179.8%200%200%201%2025.06%2049.8a84.23%2084.23%200%200%201-53.16%2035.43Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2020a108%20108%200%201%200%20108%20108A108.12%20108.12%200%200%200%20128%2020m84%20108a84.3%2084.3%200%200%201-1.32%2014.74a205%20205%200%200%200-18.52-31.49a177%20177%200%200%201%2019.08%205.62A85%2085%200%200%201%20212%20128m-9.61-38.94a204%20204%200%200%200-30-5.47a204%20204%200%200%200-5.47-30a84.53%2084.53%200%200%201%2035.47%2035.47m-63.26-44.3a177%20177%200%200%201%205.62%2019.08a205%20205%200%200%200-31.49-18.52a82.5%2082.5%200%200%201%2025.87-.56m-58.06%2013.6a179.8%20179.8%200%200%201%2049.8%2025.06a204.2%20204.2%200%200%200-85.23%2028.05a84.23%2084.23%200%200%201%2035.43-53.11M45%20140.65a180.2%20180.2%200%200%201%20104.62-34.22a180.2%20180.2%200%200%201-34.22%20104.62a84.22%2084.22%200%200%201-70.4-70.4m99.58%2069.71a204.2%20204.2%200%200%200%2028.05-85.23a179.8%20179.8%200%200%201%2025.06%2049.8a84.23%2084.23%200%200%201-53.16%2035.43Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/beach-ball-bold.svg?color=%231a73e8&size=48