@mal-icons/react

React adapter for mal-icons — a high-performance, tree-shakeable icon SDK. Each icon is a pre-generated component, so there is no runtime tree-walking, no JSON parsing on render, and no dangerouslySetInnerHTML.

Highlights

• Tree-shakeable — every icon is its own module; bundlers keep only what you import.
• Tiny — a strict per-icon budget (< 0.8 KB gzipped) is enforced in CI.
• Themeable — size, color, weight, and className resolved through IconContext, with per-icon overrides.
• Pure-CSS animations — spin, pulse, beat, bounce, ping, shake, wiggle, float, heartbeat, flip, rotate, zoom, fade, slide, glow, swing, tada, with a prefers-reduced-motion guard.
• Advanced delivery — SVG sprites, dynamic-by-name loading with caching/preloading, and CDN loaders.
• Server Components — a hook-free /server entry renders icons in RSC with zero client JS.
• Accessible — correct role / aria-hidden handling and optional <title>.

Installation

bun add @mal-icons/react
# or
npm install @mal-icons/react

Requires React 18 or newer (peer dependency).

Use with AI agents

AI coding agents can add and theme these icons for you via the mal-icons agent skill. Install it with the skills CLI:

npx skills add mal-icons/mal-icons

Then ask your agent to "add a trash icon" and it searches the catalog and writes the correct @mal-icons/react import. See the React setup guide.

Quick start

Import icons directly from the set subpath (/fi = Feather):

import { FiActivity } from "@mal-icons/react/fi";

export function Status() {
  return <FiActivity size={24} color="currentColor" title="Status" />;
}

App-wide theming

import { IconContext } from "@mal-icons/react";

export function App() {
  return (
    <IconContext.Provider value={{ size: 20, color: "#3366ff" }}>
      <Toolbar />
    </IconContext.Provider>
  );
}

Per-icon props always override context values.

Props

| Prop | Type | Description | | ---------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------- | | size | number \| string | Width and height (defaults to 1em) | | color | string | Overrides currentColor | | multicolor | boolean | Keep the icon's own colors (omits the currentColor stroke/fill defaults) | | weight | "thin" \| "light" \| "regular" \| "bold" | Stroke weight for stroke-based sets | | animate | IconAnimation ("spin", "pulse", "bounce", "shake", "heartbeat", …) | CSS animation preset | | secondaryColor | string | Multi-tone color, exposed as --mal-icons-secondary | | title | string | Accessible label (renders <title> + role="img") | | className | string | Additional class names | | style | CSSProperties | Inline styles |

Animations

Animations are pure CSS. Inject the keyframes once and they apply only to icons that opt in:

import { ICON_ANIMATIONS_CSS } from "@mal-icons/react";

<style>{ICON_ANIMATIONS_CSS}</style>;
<FiLoader animate="spin" />;

Advanced rendering

SVG sprite

import { SpriteIcon } from "@mal-icons/react";

<SpriteIcon id="fi-activity" href="/sprite/fi.svg" />;

Dynamic by name (caching + preload)

import {
  Icon,
  cdnLoader,
  setDefaultIconLoader,
  preloadIcon,
} from "@mal-icons/react";

setDefaultIconLoader(cdnLoader("https://cdn.example.com/icons"));
preloadIcon("FiActivity"); // optional warm-up

<Icon name="FiActivity" size={24} />;

React Server Components

The /server entry is hook-free and renders directly inside Server Components:

import { createServerIcon } from "@mal-icons/react/server";

API

import {
  IconBase,
  createIcon,
  SpriteIcon,
  Icon,
  cdnLoader,
  setLoader,
  setDefaultIconLoader,
  preloadIcon,
  clearIconCache,
  IconContext,
  DefaultIconContext,
  ICON_ANIMATIONS_CSS,
  WEIGHT_STROKE_WIDTH,
  animationClass,
} from "@mal-icons/react";

Icons

The bundled icon sets, their upstream licenses, pinned versions, and counts:

| Icon Library | License | Version | Count | | ---------------------------------------- | --------------------------------------------------------------------------------- | ------- | ----: | | Ant Design Icons | MIT license | 4.0.0 | 420 | | Bootstrap Icons | MIT license | 1.13.1 | 2078 | | Boxicons Logos | CC BY 4.0 license | 2.1.4 | 155 | | Boxicons Regular | CC BY 4.0 license | 2.1.4 | 814 | | Boxicons Solid | CC BY 4.0 license | 2.1.4 | 665 | | Circum Icons | MPL-2.0 license | 2.0.2 | 288 | | Codicons | CC BY 4.0 license | 0.0.46 | 604 | | css.gg | MIT license | 2.1.1 | 704 | | Devicons | MIT license | 2.0.1 | 1725 | | Feather | MIT license | 4.29.0 | 287 | | Flat Color Icons | CC BY 4.0 license | 1.0.2 | 312 | | Font Awesome Free | CC BY 4.0 license | 6.7.2 | 1402 | | Font Awesome Free Brands | CC BY 4.0 license | 6.7.2 | 495 | | Font Awesome Free Regular | CC BY 4.0 license | 6.7.2 | 163 | | Game Icons | CC BY 3.0 license | 82d9488 | 4180 | | Grommet | Apache 2.0 license | 4.14.0 | 637 | | Heroicons | MIT license | 2.2.0 | 324 | | Ionicons | MIT license | 8.0.13 | 1357 | | Line Awesome | MIT license | 1.2.1 | 1544 | | Lucide | ISC license | 1.19.0 | 1727 | | Material Icons Filled | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Rounded | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Sharp | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Two Tone | Apache 2.0 license | 0.14.15 | 2122 | | Material Symbols Outlined | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Rounded | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Sharp | Apache 2.0 license | 0.9.0 | 3004 |

| Octicons | MIT license | 19.28.1 | 733 | | Phosphor | MIT license | 2.0.8 | 1248 | | Radix Icons | MIT license | 0.0.17 | 318 | | Remix Icon | Apache 2.0 license | 4.6.0 | 3058 | | Simple Icons | CC0 1.0 license | 16.23.0 | 3442 | | Simple Line Icons | MIT license | 2.5.5 | 189 | | Tabler Icons | MIT license | 3.44.0 | 5093 | | Themify | SIL OFL 1.1 license | 9600186 | 352 | | Typicons | CC BY-SA 4.0 license | 2.1.2 | 336 | | Weather Icons | SIL OFL 1.1 license | 2.0.12 | 219 |

Subpath exports

| Import | Contents | | -------------------------------- | ---------------------------------------- | | @mal-icons/react | Adapter, context, sprite/dynamic helpers | | @mal-icons/react/ad | All Ant Design icons (named exports) | | @mal-icons/react/ci | All Circum icons (named exports) | | @mal-icons/react/dev | All Devicons icons (named exports) | | @mal-icons/react/ad/AdHome | A single Ant Design icon module | | @mal-icons/react/ci/CiHeart | A single Circum icon module | | @mal-icons/react/dev/DevDreamhost | A single Devicons icon module | | @mal-icons/react/fa | All Font Awesome icons (named exports) | | @mal-icons/react/fab | All Font Awesome Brands icons (named exports) | | @mal-icons/react/far | All Font Awesome Regular icons (named exports) | | @mal-icons/react/fc | All Flat Color icons (named exports) | | @mal-icons/react/fi | All Feather icons (named exports) | | @mal-icons/react/gi | All Game Icons icons (named exports) | | @mal-icons/react/gr | All Grommet icons (named exports) | | @mal-icons/react/fa/FaHeart | A single icon module | | @mal-icons/react/fab/FabGithub | A single icon module | | @mal-icons/react/far/FarHeart | A single icon module | | @mal-icons/react/fc/FcAbout | A single icon module | | @mal-icons/react/fi/FiActivity | A single icon module | | @mal-icons/react/gi/GiAce | A single icon module | | @mal-icons/react/gr/GrHome | A single icon module | | @mal-icons/react/io | All Ionicons (named exports) | | @mal-icons/react/la | All Line Awesome (named exports) | | @mal-icons/react/lu | All Lucide (named exports) | | @mal-icons/react/mdf | All Material Icons Filled (named exports) | | @mal-icons/react/mdr | All Material Icons Rounded (named exports) | | @mal-icons/react/mds | All Material Icons Sharp (named exports) | | @mal-icons/react/mdt | All Material Icons Two Tone (named exports) | | @mal-icons/react/mso | All Material Symbols Outlined (named exports) | | @mal-icons/react/msr | All Material Symbols Rounded (named exports) | | @mal-icons/react/mss | All Material Symbols Sharp (named exports) | | @mal-icons/react/oc | All Octicons (named exports) | | @mal-icons/react/io/IoHeart | A single Ionicons icon module | | @mal-icons/react/la/LaHeart | A single Line Awesome icon module | | @mal-icons/react/lu/LuHeart | A single Lucide icon module | | @mal-icons/react/oc/OcHeart16 | A single Octicons icon module | | @mal-icons/react/ti | All Typicons (named exports) | | @mal-icons/react/wi | All Weather Icons (named exports) | | @mal-icons/react/ti/TiHeart | A single Typicons icon module | | @mal-icons/react/wi/WiDaySunny | A single Weather Icons icon module | | @mal-icons/react/server | Hook-free Server Component entry | | @mal-icons/react/sprite/ad.svg | Pre-built Ant Design sprite asset | | @mal-icons/react/sprite/ci.svg | Pre-built Circum sprite asset | | @mal-icons/react/sprite/dev.svg | Pre-built Devicons sprite asset | | @mal-icons/react/sprite/fa.svg | Pre-built Font Awesome sprite asset | | @mal-icons/react/sprite/fab.svg | Pre-built Font Awesome Brands sprite asset | | @mal-icons/react/sprite/far.svg | Pre-built Font Awesome Regular sprite asset | | @mal-icons/react/sprite/fi.svg | Pre-built Feather sprite asset | | @mal-icons/react/sprite/gi.svg | Pre-built Game Icons sprite asset | | @mal-icons/react/sprite/gr.svg | Pre-built Grommet sprite asset | | @mal-icons/react/sprite/io.svg | Pre-built Ionicons sprite asset | | @mal-icons/react/sprite/la.svg | Pre-built Line Awesome sprite asset | | @mal-icons/react/sprite/lu.svg | Pre-built Lucide sprite asset | | @mal-icons/react/sprite/oc.svg | Pre-built Octicons sprite asset | | @mal-icons/react/sprite/ti.svg | Pre-built Typicons sprite asset | | @mal-icons/react/sprite/wi.svg | Pre-built Weather Icons sprite asset | | @mal-icons/react/hi | All Heroicons icons (named exports) | | @mal-icons/react/hi/HiAcademicCap | A single Heroicons icon module | | @mal-icons/react/sprite/hi.svg | Pre-built Heroicons sprite asset | | @mal-icons/react/sl | All Simple Line Icons icons (named exports) | | @mal-icons/react/sl/SlActionRedo | A single Simple Line Icons icon module | | @mal-icons/react/sprite/sl.svg | Pre-built Simple Line Icons sprite asset | | @mal-icons/react/cg | All css.gg icons (named exports) | | @mal-icons/react/cg/CgAbstract | A single css.gg icon module | | @mal-icons/react/sprite/cg.svg | Pre-built css.gg sprite asset | | @mal-icons/react/vsc | All Codicons icons (named exports) | | @mal-icons/react/vsc/VscAccount | A single Codicons icon module | | @mal-icons/react/sprite/vsc.svg | Pre-built Codicons sprite asset | | @mal-icons/react/tf | All Themify icons (named exports) | | @mal-icons/react/tf/TfAgenda | A single Themify icon module | | @mal-icons/react/sprite/tf.svg | Pre-built Themify sprite asset | | @mal-icons/react/rx | All Radix Icons icons (named exports) | | @mal-icons/react/rx/RxAccessibility | A single Radix Icons icon module | | @mal-icons/react/sprite/rx.svg | Pre-built Radix Icons sprite asset | | @mal-icons/react/bs | All Bootstrap Icons icons (named exports) | | @mal-icons/react/bs/BsAlarm | A single Bootstrap Icons icon module | | @mal-icons/react/sprite/bs.svg | Pre-built Bootstrap Icons sprite asset | | @mal-icons/react/ri | All Remix Icon icons (named exports) | | @mal-icons/react/ri/RiHome2Line | A single Remix Icon icon module | | @mal-icons/react/sprite/ri.svg | Pre-built Remix Icon sprite asset | | @mal-icons/react/si | All Simple Icons icons (named exports) | | @mal-icons/react/si/SiGithub | A single Simple Icons icon module | | @mal-icons/react/sprite/si.svg | Pre-built Simple Icons sprite asset | | @mal-icons/react/bx | All Boxicons Regular icons (named exports) | | @mal-icons/react/bx/BxAbacus | A single Boxicons Regular icon module | | @mal-icons/react/sprite/bx.svg | Pre-built Boxicons Regular sprite asset | | @mal-icons/react/bxl | All Boxicons Logos icons (named exports) | | @mal-icons/react/bxl/BxlGithub | A single Boxicons Logos icon module | | @mal-icons/react/sprite/bxl.svg | Pre-built Boxicons Logos sprite asset | | @mal-icons/react/bxs | All Boxicons Solid icons (named exports) | | @mal-icons/react/bxs/BxsHeart | A single Boxicons Solid icon module | | @mal-icons/react/sprite/bxs.svg | Pre-built Boxicons Solid sprite asset | | @mal-icons/react/tb | All Tabler icons (named exports) | | @mal-icons/react/tb/TbHeart | A single Tabler icon module | | @mal-icons/react/sprite/tb.svg | Pre-built Tabler sprite asset | | @mal-icons/react/ph | All Phosphor icons (named exports) | | @mal-icons/react/ph/PhHeart | A single Phosphor icon module | | @mal-icons/react/sprite/ph.svg | Pre-built Phosphor sprite asset |

Example

A complete Vite + React 19 gallery — context theming, weights, animations, and live search — lives in examples/react. A Next.js App Router (RSC) demo lives in examples/nextjs.

Repository

https://github.com/mal-icons/mal-icons · package directory packages/react.

License

MIT © MALDevs. Source icon sets may carry their own licenses — use mal-icons licenses from the CLI when shipping bundled sets.