Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Phosphor Icons · PiAtomThin

Atom Thin icon

A free atom thin icon from Phosphor Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
MIT license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/phosphor/atom-thin.json
components/icons/phosphor-atom-thin.tsx
import * as React from "react";

/**
 * Atom Thin from Phosphor Icons (https://github.com/phosphor-icons/core), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/phosphor/atom-thin. Sized in em, colored by currentColor.
 */
export function PiAtomThinIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 256 256"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M211.89,162.47A195.58,195.58,0,0,0,191.36,128a195.58,195.58,0,0,0,20.53-34.47c10.38-23.06,10.81-41,1.21-50.63s-27.57-9.17-50.63,1.21A195.58,195.58,0,0,0,128,64.64,195.58,195.58,0,0,0,93.53,44.11C70.47,33.73,52.49,33.3,42.9,42.9s-9.17,27.57,1.21,50.63A195.58,195.58,0,0,0,64.64,128a195.58,195.58,0,0,0-20.53,34.47c-10.38,23.06-10.81,41-1.21,50.63h0C47.5,217.7,54,220,62.12,220c8.78,0,19.41-2.71,31.41-8.11A195.58,195.58,0,0,0,128,191.36a195.58,195.58,0,0,0,34.47,20.53c12,5.4,22.63,8.11,31.41,8.11,8.09,0,14.62-2.3,19.22-6.9h0C222.7,203.51,222.27,185.53,211.89,162.47ZM207.45,48.55c10.27,10.28,3.14,39.05-21.1,72.84A301,301,0,0,0,162,94a301,301,0,0,0-27.43-24.31C168.4,45.4,197.17,38.27,207.45,48.55Zm-26,79.45a293.16,293.16,0,0,1-25,28.38,291.82,291.82,0,0,1-28.38,25,291.82,291.82,0,0,1-28.38-25,293.16,293.16,0,0,1-25-28.38A302.36,302.36,0,0,1,128,74.58a295.83,295.83,0,0,1,28.37,25A293.16,293.16,0,0,1,181.41,128ZM48.55,48.55c3.05-3,7.71-4.55,13.64-4.55,14.11,0,35.41,8.59,59.19,25.65a304.89,304.89,0,0,0-51.73,51.74C45.41,87.6,38.28,58.83,48.55,48.55Zm0,158.9c-10.27-10.28-3.14-39,21.1-72.84A301,301,0,0,0,94,162a301,301,0,0,0,27.43,24.31C87.6,210.59,58.83,217.72,48.55,207.45Zm158.9,0c-10.28,10.27-39,3.14-72.84-21.1A301,301,0,0,0,162,162a301,301,0,0,0,24.31-27.43C210.59,168.4,217.72,197.17,207.45,207.45ZM136,128a8,8,0,1,1-8-8A8,8,0,0,1,136,128Z"
      />
    </svg>
  );
}
With react-icons
import { PiAtomThin } from "react-icons/pi";

export function Example() {
  return <PiAtomThin className="size-5" />;
}
atom-thin.svg
<svg
  viewBox="0 0 256 256"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M211.89,162.47A195.58,195.58,0,0,0,191.36,128a195.58,195.58,0,0,0,20.53-34.47c10.38-23.06,10.81-41,1.21-50.63s-27.57-9.17-50.63,1.21A195.58,195.58,0,0,0,128,64.64,195.58,195.58,0,0,0,93.53,44.11C70.47,33.73,52.49,33.3,42.9,42.9s-9.17,27.57,1.21,50.63A195.58,195.58,0,0,0,64.64,128a195.58,195.58,0,0,0-20.53,34.47c-10.38,23.06-10.81,41-1.21,50.63h0C47.5,217.7,54,220,62.12,220c8.78,0,19.41-2.71,31.41-8.11A195.58,195.58,0,0,0,128,191.36a195.58,195.58,0,0,0,34.47,20.53c12,5.4,22.63,8.11,31.41,8.11,8.09,0,14.62-2.3,19.22-6.9h0C222.7,203.51,222.27,185.53,211.89,162.47ZM207.45,48.55c10.27,10.28,3.14,39.05-21.1,72.84A301,301,0,0,0,162,94a301,301,0,0,0-27.43-24.31C168.4,45.4,197.17,38.27,207.45,48.55Zm-26,79.45a293.16,293.16,0,0,1-25,28.38,291.82,291.82,0,0,1-28.38,25,291.82,291.82,0,0,1-28.38-25,293.16,293.16,0,0,1-25-28.38A302.36,302.36,0,0,1,128,74.58a295.83,295.83,0,0,1,28.37,25A293.16,293.16,0,0,1,181.41,128ZM48.55,48.55c3.05-3,7.71-4.55,13.64-4.55,14.11,0,35.41,8.59,59.19,25.65a304.89,304.89,0,0,0-51.73,51.74C45.41,87.6,38.28,58.83,48.55,48.55Zm0,158.9c-10.27-10.28-3.14-39,21.1-72.84A301,301,0,0,0,94,162a301,301,0,0,0,27.43,24.31C87.6,210.59,58.83,217.72,48.55,207.45Zm158.9,0c-10.28,10.27-39,3.14-72.84-21.1A301,301,0,0,0,162,162a301,301,0,0,0,24.31-27.43C210.59,168.4,217.72,197.17,207.45,207.45ZM136,128a8,8,0,1,1-8-8A8,8,0,0,1,136,128Z"
  />
</svg>
Attribution
"Atom Thin" icon from Phosphor Icons (https://github.com/phosphor-icons/core), licensed under MIT license.

Related icons: