Ferhat Kefsiz

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

I really love to use Phosphor Icons in my projects. They are simple, clean, and easy to use. You can use them in your projects by simply copying my code snippet below.

export function PhosphorIcon({ label, path, size, ...rest }) {
  return (
    <svg
      aria-label={label}
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 256 256"
      fill="currentColor"
      {...rest}
    >
      <path d={path} />
    </svg>
  )
}

example of using the icon:

export function SearchIcon({ size }) {
  return (
    <PhosphorIcon
      label="Search"
      size={size}
      path="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"
    />
  )
}