beach ball icon

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

Name: beach-ball-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

beach-ball beach-ball-bold beach-ball-duotone beach-ball-fill beach-ball-light

The same icon in other sets

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 28a100 100 0 1 0 100 100A100.11 100.11 0 0 0 128 28m88.14 73.64A195 195 0 0 0 165 91a195 195 0 0 0-10.68-51.1a92.33 92.33 0 0 1 61.82 61.74M145 37.58a187.5 187.5 0 0 1 11.3 45.68a196.4 196.4 0 0 0-66.63-38.88A91.3 91.3 0 0 1 128 36a92.4 92.4 0 0 1 17 1.58M79.86 49.63a188.1 188.1 0 0 1 72.45 40.82A196.2 196.2 0 0 0 36 127.39a92 92 0 0 1 43.86-77.76M36.44 137a188.17 188.17 0 0 1 121-38.48a188.17 188.17 0 0 1-38.48 121A92.17 92.17 0 0 1 36.44 137m92.17 83a196.2 196.2 0 0 0 36.94-116.3a188.1 188.1 0 0 1 40.82 72.45A92 92 0 0 1 128.61 220m83-53.66a196.4 196.4 0 0 0-38.87-66.64a187.5 187.5 0 0 1 45.68 11.3a92.4 92.4 0 0 1 1.58 17a91.3 91.3 0 0 1-8.38 38.33Z"/></svg>

React

import type { SVGProps } from "react";

export function PhBeachBallThin(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 28a100 100 0 1 0 100 100A100.11 100.11 0 0 0 128 28m88.14 73.64A195 195 0 0 0 165 91a195 195 0 0 0-10.68-51.1a92.33 92.33 0 0 1 61.82 61.74M145 37.58a187.5 187.5 0 0 1 11.3 45.68a196.4 196.4 0 0 0-66.63-38.88A91.3 91.3 0 0 1 128 36a92.4 92.4 0 0 1 17 1.58M79.86 49.63a188.1 188.1 0 0 1 72.45 40.82A196.2 196.2 0 0 0 36 127.39a92 92 0 0 1 43.86-77.76M36.44 137a188.17 188.17 0 0 1 121-38.48a188.17 188.17 0 0 1-38.48 121A92.17 92.17 0 0 1 36.44 137m92.17 83a196.2 196.2 0 0 0 36.94-116.3a188.1 188.1 0 0 1 40.82 72.45A92 92 0 0 1 128.61 220m83-53.66a196.4 196.4 0 0 0-38.87-66.64a187.5 187.5 0 0 1 45.68 11.3a92.4 92.4 0 0 1 1.58 17a91.3 91.3 0 0 1-8.38 38.33Z"/></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 28a100 100 0 1 0 100 100A100.11 100.11 0 0 0 128 28m88.14 73.64A195 195 0 0 0 165 91a195 195 0 0 0-10.68-51.1a92.33 92.33 0 0 1 61.82 61.74M145 37.58a187.5 187.5 0 0 1 11.3 45.68a196.4 196.4 0 0 0-66.63-38.88A91.3 91.3 0 0 1 128 36a92.4 92.4 0 0 1 17 1.58M79.86 49.63a188.1 188.1 0 0 1 72.45 40.82A196.2 196.2 0 0 0 36 127.39a92 92 0 0 1 43.86-77.76M36.44 137a188.17 188.17 0 0 1 121-38.48a188.17 188.17 0 0 1-38.48 121A92.17 92.17 0 0 1 36.44 137m92.17 83a196.2 196.2 0 0 0 36.94-116.3a188.1 188.1 0 0 1 40.82 72.45A92 92 0 0 1 128.61 220m83-53.66a196.4 196.4 0 0 0-38.87-66.64a187.5 187.5 0 0 1 45.68 11.3a92.4 92.4 0 0 1 1.58 17a91.3 91.3 0 0 1-8.38 38.33Z"/></svg>
</template>

CSS

.icon-beach-ball-thin {
  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%2028a100%20100%200%201%200%20100%20100A100.11%20100.11%200%200%200%20128%2028m88.14%2073.64A195%20195%200%200%200%20165%2091a195%20195%200%200%200-10.68-51.1a92.33%2092.33%200%200%201%2061.82%2061.74M145%2037.58a187.5%20187.5%200%200%201%2011.3%2045.68a196.4%20196.4%200%200%200-66.63-38.88A91.3%2091.3%200%200%201%20128%2036a92.4%2092.4%200%200%201%2017%201.58M79.86%2049.63a188.1%20188.1%200%200%201%2072.45%2040.82A196.2%20196.2%200%200%200%2036%20127.39a92%2092%200%200%201%2043.86-77.76M36.44%20137a188.17%20188.17%200%200%201%20121-38.48a188.17%20188.17%200%200%201-38.48%20121A92.17%2092.17%200%200%201%2036.44%20137m92.17%2083a196.2%20196.2%200%200%200%2036.94-116.3a188.1%20188.1%200%200%201%2040.82%2072.45A92%2092%200%200%201%20128.61%20220m83-53.66a196.4%20196.4%200%200%200-38.87-66.64a187.5%20187.5%200%200%201%2045.68%2011.3a92.4%2092.4%200%200%201%201.58%2017a91.3%2091.3%200%200%201-8.38%2038.33Z%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%2028a100%20100%200%201%200%20100%20100A100.11%20100.11%200%200%200%20128%2028m88.14%2073.64A195%20195%200%200%200%20165%2091a195%20195%200%200%200-10.68-51.1a92.33%2092.33%200%200%201%2061.82%2061.74M145%2037.58a187.5%20187.5%200%200%201%2011.3%2045.68a196.4%20196.4%200%200%200-66.63-38.88A91.3%2091.3%200%200%201%20128%2036a92.4%2092.4%200%200%201%2017%201.58M79.86%2049.63a188.1%20188.1%200%200%201%2072.45%2040.82A196.2%20196.2%200%200%200%2036%20127.39a92%2092%200%200%201%2043.86-77.76M36.44%20137a188.17%20188.17%200%200%201%20121-38.48a188.17%20188.17%200%200%201-38.48%20121A92.17%2092.17%200%200%201%2036.44%20137m92.17%2083a196.2%20196.2%200%200%200%2036.94-116.3a188.1%20188.1%200%200%201%2040.82%2072.45A92%2092%200%200%201%20128.61%20220m83-53.66a196.4%20196.4%200%200%200-38.87-66.64a187.5%20187.5%200%200%201%2045.68%2011.3a92.4%2092.4%200%200%201%201.58%2017a91.3%2091.3%200%200%201-8.38%2038.33Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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