Source

// Line icons drawn for Lingo (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 = 20, 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 Bolt = ({ size = 20, className }: P) => svg(size, className, <path d="M13.5 2 4.8 13.2h6.3L10 22l9.2-11.6h-6.4L13.5 2Z" />, true);
export const Snow = ({ size = 20, className }: P) => svg(size, className, <><path d="M12 2v20M3.3 7l17.4 10M20.7 7 3.3 17" /><path d="m9 3.5 3 2 3-2M9 20.5l3-2 3 2M3.6 10.2l3-.9-.8-3M20.4 13.8l-3 .9.8 3M3.6 13.8l3 .9-.8 3M20.4 10.2l-3-.9.8-3" /></>);
export const Check = ({ size = 20, className }: P) => svg(size, className, <path d="m5 12.5 4.5 4.5L19 7.5" />);
export const Close = ({ size = 20, className }: P) => svg(size, className, <path d="M6 6l12 12M18 6 6 18" />);
export const Lock = ({ size = 20, className }: P) => svg(size, className, <><rect x="5" y="10.5" width="14" height="10" rx="2.5" /><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" /></>);
export const Star = ({ size = 20, className }: P) => svg(size, className, <path d="m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.8l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8L12 3Z" />, true);
export const Speaker = ({ size = 20, className }: P) => svg(size, className, <><path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" /><path d="M15.5 9a4.2 4.2 0 0 1 0 6M18.3 6.5a8 8 0 0 1 0 11" /></>);
export const Slow = ({ size = 20, className }: P) => svg(size, className, <><path d="M3 16.5c0-4.4 3.6-8 8-8s8 3.6 8 8z" /><path d="M19 13.5h1.5a1.5 1.5 0 0 0 0-3H19M6 16.5v2M16 16.5v2M7.5 12.5l2-2M11 11.5V9M14.5 12.5l-2-2" /></>);
export const Mic = ({ size = 20, className }: P) => svg(size, className, <><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21" /></>);
export const Path = ({ size = 22, className }: P) => svg(size, className, <><circle cx="7" cy="5.5" r="2.5" /><circle cx="17" cy="12" r="2.5" /><circle cx="7" cy="18.5" r="2.5" /><path d="M9.2 6.7l5.6 4M14.8 13.3l-5.6 4" /></>);
export const Dumbbell = ({ size = 22, className }: P) => svg(size, className, <path d="M3.5 9.5v5M6.5 7v10M17.5 7v10M20.5 9.5v5M6.5 12h11" />);
export const Shield = ({ size = 22, className }: P) => svg(size, className, <><path d="M12 3 4.5 6v5.5c0 4.4 3.1 8.2 7.5 9.5 4.4-1.3 7.5-5.1 7.5-9.5V6L12 3Z" /><path d="m9 12 2 2 4-4" /></>);
export const Person = ({ size = 22, className }: P) => svg(size, className, <><circle cx="12" cy="8" r="3.8" /><path d="M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5" /></>);
export const Book = ({ size = 20, className }: P) => svg(size, className, <><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z" /><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5" /></>);
export const Arrow = ({ size = 18, className }: P) => svg(size, className, <path d="M5 12h14M13 6l6 6-6 6" />);
export const Back = ({ size = 18, className }: P) => svg(size, className, <path d="M19 12H5M11 6l-6 6 6 6" />);
export const Undo = ({ size = 18, className }: P) => svg(size, className, <path d="M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />);