Source

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

export const Home = ({ size = 22, className }: P) => svg(size, className, <><path d="M4 11.5 12 5l8 6.5" /><path d="M6 10v9.5h12V10" /><path d="M10 19.5v-5h4v5" /></>);
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 Plus = ({ size = 22, className }: P) => svg(size, className, <path d="M12 5v14M5 12h14" />);
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 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 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 Download = ({ size = 18, className }: P) => svg(size, className, <path d="M12 3v12M7 10l5 5 5-5M5 20h14" />);
export const Upload = ({ size = 18, className }: P) => svg(size, className, <path d="M12 16V4M7 9l5-5 5 5M5 20h14" />);
export const Out = ({ size = 16, className }: P) => svg(size, className, <path d="M14 5h5v5M19 5l-8 8M10 6H6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4" />);
export const Pencil = ({ size = 18, className }: P) => svg(size, className, <path d="M4 20h4L19 9l-4-4L4 16v4ZM13.5 6.5l4 4" />);
export const Trash = ({ size = 18, className }: P) => svg(size, className, <path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5M10 11v5M14 11v5" />);
export const Leaf = ({ size = 18, className }: P) => svg(size, className, <><path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14" /><path d="M5 19c3-4 6-6 9-7.5" /></>);