abhi-react-food-icons

A set of 20 clean, consistent food icons as React components. Line-style, tree-shakeable, and typed with TypeScript. Props mirror lucide-react ergonomics (size, color, strokeWidth, className), so they drop into an existing icon setup with no surprises.

Install

npm install abhi-react-food-icons

Usage

import { Pizza, Burger, Coffee } from 'abhi-react-food-icons';

function Menu() {
  return (
    <div>
      <Pizza />
      <Burger size={32} color="#e11d48" />
      <Coffee size={40} strokeWidth={1.5} className="menu-icon" />
    </div>
  );
}

Each icon is its own module, so bundlers only include the icons you actually import.

Props

| Prop | Type | Default | Description | | ------------- | ------------------ | ---------------- | ------------------------------------ | | size | number \| string | 24 | Width and height in pixels | | color | string | 'currentColor' | Stroke color | | strokeWidth | number \| string | 2 | Stroke width | | className | string | — | Passed through to the <svg> |

Any other valid <svg> prop (e.g. onClick, style, aria-label) is forwarded as well, and a ref points at the underlying <svg> element.

By default color is currentColor, so an icon inherits the text color of its container:

<span style={{ color: '#f59e0b' }}>
  <Fries />
</span>

Available icons

Pizza, Burger, Fries, Coffee, Cupcake, IceCream, Donut, Apple, Cheese, Egg, Bread, Taco, Sushi, Ramen, Cookie, Avocado, Carrot, Wine, Soda, HotDog

License

MIT