Source

// Line icons drawn for Habits (no icon font, no emoji).
type P = { size?: number; className?: string };
const svg = (size: number, className: string | undefined, children: React.ReactNode, fill = false) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" className={className}
    fill={fill ? "currentColor" : "none"} stroke={fill ? "none" : "currentColor"} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

export const Flame = ({ size = 18, className }: P) => svg(size, className, <path d="M12.3 2.5c.4 3.1 2.2 4.6 3.9 6.4 1.6 1.7 2.8 3.6 2.8 6.1A7 7 0 0 1 12 22a7 7 0 0 1-7-7c0-2.7 1.4-4.6 2.9-6.1.3 1.6 1.1 2.7 2.4 3.3-.4-3.7.6-7 2-9.7Z" />, true);
export const Check = ({ size = 20, className }: P) => svg(size, className, <path d="m5 12.5 4.5 4.5L19 7.5" />);
export const Plus = ({ size = 20, className }: P) => svg(size, className, <path d="M12 5v14M5 12h14" />);
export const Minus = ({ size = 20, className }: P) => svg(size, className, <path d="M5 12h14" />);
export const Close = ({ size = 20, className }: P) => svg(size, className, <path d="M6 6l12 12M18 6 6 18" />);
export const Back = ({ size = 18, className }: P) => svg(size, className, <path d="M15 5l-7 7 7 7" />);
export const Next = ({ size = 18, className }: P) => svg(size, className, <path d="M9 5l7 7-7 7" />);
export const Up = ({ size = 18, className }: P) => svg(size, className, <path d="M6 15l6-6 6 6" />);
export const Down = ({ size = 18, className }: P) => svg(size, className, <path d="M6 9l6 6 6-6" />);
export const Today = ({ size = 22, className }: P) => svg(size, className, <><rect x="4" y="4" width="16" height="16" rx="4" /><path d="m8.5 12.2 2.4 2.4 4.6-5" /></>);
export const Week = ({ size = 22, className }: P) => svg(size, className, <><rect x="3.5" y="5" width="17" height="15" rx="3" /><path d="M3.5 10h17M8 3v4M16 3v4M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01" /></>);
export const List = ({ size = 22, className }: P) => svg(size, className, <path d="M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01" />);
export const Gear = ({ size = 22, className }: P) => svg(size, className, <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.6 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" /></>);
export const People = ({ size = 18, className }: P) => svg(size, className, <><circle cx="9" cy="8.5" r="3.2" /><path d="M3 19.5c.9-3 3.2-4.6 6-4.6s5.1 1.6 6 4.6" /><path d="M15.5 5.6a3.2 3.2 0 0 1 0 6M17.5 14.9c1.7.6 2.9 2 3.5 4.6" /></>);
export const Bell = ({ size = 18, className }: P) => svg(size, className, <><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z" /><path d="M10 21h4" /></>);
export const Note = ({ size = 16, className }: P) => svg(size, className, <><path d="M5 4.5h14v11l-4 4H5z" /><path d="M15 19.5v-4h4M8.5 9h7M8.5 12.5h4" /></>);
export const Pencil = ({ size = 18, className }: P) => svg(size, className, <path d="M4 20h4L19 9l-4-4L4 16v4ZM13.5 6.5l4 4" />);
export const Share = ({ size = 18, className }: P) => svg(size, className, <path d="M12 3v12M7 8l5-5 5 5M5 13v6h14v-6" />);
export const Archive = ({ size = 18, className }: P) => svg(size, className, <><rect x="3.5" y="4.5" width="17" height="4.5" rx="1.5" /><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4" /></>);
export const Download = ({ size = 18, className }: P) => svg(size, className, <path d="M12 3v12M7 10l5 5 5-5M5 20h14" />);