cupertino-icons-svg

Cupertino Icons (Apple-style SF Symbols) as individual SVG files for the web and JS bundlers.

This package converts the official Flutter CupertinoIcons.ttf font into a set of standalone SVG files, one per icon, with fill="currentColor" so they inherit the text color wherever they are used.

Installation

npm install cupertino-icons-svg

Usage

Named imports (barrel) — one place, good for autocomplete; tree-shaking keeps bundles small:

import { HeartFill, Airplane } from 'cupertino-icons-svg';

// e.g. in React
export function Example() {
  return (
    <>
      <img src={HeartFill} alt="heart" />
      <img src={Airplane} alt="airplane" />
    </>
  );
}

Deep imports — one icon per import; only the icons you use are loaded:

import HeartFill from 'cupertino-icons-svg/HeartFill';

export function Example() {
  return <img src={HeartFill} alt="heart" />;
}

Icon names are PascalCase (e.g. HeartFill, ArrowClockwise). The package default export is the icon manifest (same as icons.json):

import iconManifest from 'cupertino-icons-svg';
// iconManifest['heart_fill'] === 'svg/heart_fill.svg'

You can also use raw SVG paths or import a specific file:

<img src="node_modules/cupertino-icons-svg/svg/heart_fill.svg" alt="heart" />

import heartFill from 'cupertino-icons-svg/svg/heart_fill.svg';
return <img src={heartFill} alt="heart" />;

Icon gallery

A live gallery is published on GitHub Pages. To run it locally:

npm run gallery

Then open http://localhost:3333/gallery.html in your browser. The gallery lists all icons with a search filter.

Development

This repo uses the official cupertino_icons source from the Flutter packages repo via a git submodule. First-time setup: ensure the submodule is cloned and sparse-checkout is set so only the icon package is checked out:

git submodule update --init
./scripts/init-cupertino-source.sh

Then the build script will:

• Parse icon names from index.html
• Read glyphs from assets/CupertinoIcons.ttf
• Resolve ligatures
• Export clean SVG files into svg/
• Generate icons.json

To re-run the extraction after changing the script:

npm install
npm run build