empty icon

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

Name
empty-thin
Set
Phosphor
Style
Thin
Viewbox
256×256
License
MIT

5 other variants in Phosphor

emptyempty-boldempty-duotoneempty-fillempty-light

The same icon in other sets

emptyIconParkemptyIconPark OutlineemptyIconPark Solid

Use the empty icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m192.76 62.72l18.2-20a4 4 0 0 0-5.96-5.41l-18.2 20a92 92 0 0 0-123.6 136l-18.2 20a4 4 0 1 0 6 5.38l18.2-20A92 92 0 0 0 192.76 62.72M44 128a84 84 0 0 1 137.46-64.75L68.63 187.36A83.72 83.72 0 0 1 44 128m84 84a83.64 83.64 0 0 1-53.46-19.25L187.37 68.64A84 84 0 0 1 128 212"/></svg>

React

import type { SVGProps } from "react";

export function PhEmptyThin(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="m192.76 62.72l18.2-20a4 4 0 0 0-5.96-5.41l-18.2 20a92 92 0 0 0-123.6 136l-18.2 20a4 4 0 1 0 6 5.38l18.2-20A92 92 0 0 0 192.76 62.72M44 128a84 84 0 0 1 137.46-64.75L68.63 187.36A83.72 83.72 0 0 1 44 128m84 84a83.64 83.64 0 0 1-53.46-19.25L187.37 68.64A84 84 0 0 1 128 212"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m192.76 62.72l18.2-20a4 4 0 0 0-5.96-5.41l-18.2 20a92 92 0 0 0-123.6 136l-18.2 20a4 4 0 1 0 6 5.38l18.2-20A92 92 0 0 0 192.76 62.72M44 128a84 84 0 0 1 137.46-64.75L68.63 187.36A83.72 83.72 0 0 1 44 128m84 84a83.64 83.64 0 0 1-53.46-19.25L187.37 68.64A84 84 0 0 1 128 212"/></svg>
</template>

CSS

.icon-empty-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%22m192.76%2062.72l18.2-20a4%204%200%200%200-5.96-5.41l-18.2%2020a92%2092%200%200%200-123.6%20136l-18.2%2020a4%204%200%201%200%206%205.38l18.2-20A92%2092%200%200%200%20192.76%2062.72M44%20128a84%2084%200%200%201%20137.46-64.75L68.63%20187.36A83.72%2083.72%200%200%201%2044%20128m84%2084a83.64%2083.64%200%200%201-53.46-19.25L187.37%2068.64A84%2084%200%200%201%20128%20212%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%22m192.76%2062.72l18.2-20a4%204%200%200%200-5.96-5.41l-18.2%2020a92%2092%200%200%200-123.6%20136l-18.2%2020a4%204%200%201%200%206%205.38l18.2-20A92%2092%200%200%200%20192.76%2062.72M44%20128a84%2084%200%200%201%20137.46-64.75L68.63%20187.36A83.72%2083.72%200%200%201%2044%20128m84%2084a83.64%2083.64%200%200%201-53.46-19.25L187.37%2068.64A84%2084%200%200%201%20128%20212%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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