@mal-icons/react-native

React Native adapter for mal-icons. The same icon set you use on the web renders natively on iOS and Android, backed by react-native-svg.

Highlights

• Native rendering — each icon maps to react-native-svg primitives (Svg, Path, Polyline, Circle, …), no WebView.
• Tree-shakeable — every icon is its own module.
• Shared API — the same prop surface and IconContext theming as the React adapter.
• Accessible — optional title for screen readers.

Installation

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

Peer dependencies: react >=18, react-native >=0.70, and react-native-svg >=13. Follow the react-native-svg install steps for your project (Expo or bare).

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-native import. See the React Native setup guide.

Quick start

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

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

App-wide theming

Sizes are plain numbers — there is no DOM or CSS:

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

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

Per-icon props always override context values.

Props

| Prop | Type | Description | | ------- | ------------------ | ----------------------------------- | | size | number \| string | Width and height | | color | string | Overrides currentColor | | multicolor | boolean | Keep the icon's own colors (omits the currentColor stroke/fill defaults) | | title | string | Accessible label for screen readers | | style | StyleProp | Style passed to the root <Svg> |

CSS-only features from the web adapters (pure-CSS animate, --mal-icons-secondary) do not apply on native. Use react-native-svg / Reanimated for motion.

API

import {
  IconBase,
  createIcon,
  IconContext,
  DefaultIconContext,
} from "@mal-icons/react-native";

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 | | 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 | | Grommet | Apache 2.0 license | 4.14.0 | 637 | | Heroicons | MIT license | 2.2.0 | 324 | | Ionicons | MIT license | 8.0.13 | 1357 | | Lucide | ISC license | 1.19.0 | 1727 | | Octicons | MIT license | 19.28.1 | 733 | | Radix Icons | MIT license | 0.0.17 | 318 | | Simple Line Icons | MIT license | 2.5.5 | 189 | | 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-native | Adapter and context | | @mal-icons/react-native/ad | All Ant Design icons (named exports) | | @mal-icons/react-native/ci | All Circum icons (named exports) | | @mal-icons/react-native/dev | All Devicons icons (named exports) | | @mal-icons/react-native/ad/AdHome | A single Ant Design icon module | | @mal-icons/react-native/ci/CiHeart | A single Circum icon module | | @mal-icons/react-native/dev/DevDreamhost | A single Devicons icon module | | @mal-icons/react-native/fa | All Font Awesome icons (named exports) | | @mal-icons/react-native/fab | All Font Awesome Brands icons (named exports) | | @mal-icons/react-native/far | All Font Awesome Regular icons (named exports) | | @mal-icons/react-native/fc | All Flat Color icons (named exports) | | @mal-icons/react-native/fi | All Feather icons (named exports) | | @mal-icons/react-native/gr | All Grommet icons (named exports) | | @mal-icons/react-native/fa/FaHeart | A single icon module | | @mal-icons/react-native/fab/FabGithub | A single icon module | | @mal-icons/react-native/far/FarHeart | A single icon module | | @mal-icons/react-native/fc/FcAbout | A single icon module | | @mal-icons/react-native/fi/FiActivity | A single icon module | | @mal-icons/react-native/gr/GrHome | A single icon module | | @mal-icons/react-native/io | All Ionicons (named exports) | | @mal-icons/react-native/lu | All Lucide (named exports) | | @mal-icons/react-native/oc | All Octicons (named exports) | | @mal-icons/react-native/io/IoHeart | A single Ionicons icon module | | @mal-icons/react-native/lu/LuHeart | A single Lucide icon module | | @mal-icons/react-native/oc/OcHeart16 | A single Octicons icon module | | @mal-icons/react-native/ti | All Typicons (named exports) | | @mal-icons/react-native/wi | All Weather Icons (named exports) | | @mal-icons/react-native/ti/TiHeart | A single Typicons icon module | | @mal-icons/react-native/wi/WiDaySunny | A single Weather Icons icon module | | @mal-icons/react-native/hi | All Heroicons icons (named exports) | | @mal-icons/react-native/hi/HiAcademicCap | A single Heroicons icon module | | @mal-icons/react-native/sl | All Simple Line Icons icons (named exports) | | @mal-icons/react-native/sl/SlActionRedo | A single Simple Line Icons icon module | | @mal-icons/react-native/cg | All css.gg icons (named exports) | | @mal-icons/react-native/cg/CgAbstract | A single css.gg icon module | | @mal-icons/react-native/vsc | All Codicons icons (named exports) | | @mal-icons/react-native/vsc/VscAccount | A single Codicons icon module | | @mal-icons/react-native/tf | All Themify icons (named exports) | | @mal-icons/react-native/tf/TfAgenda | A single Themify icon module | | @mal-icons/react-native/rx | All Radix Icons icons (named exports) | | @mal-icons/react-native/rx/RxAccessibility | A single Radix Icons icon module |

Example

An Expo demo that themes native <Svg> icons via IconContext lives in examples/react-native.

Repository

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

License

MIT © MALDevs