Direct imports

Two ways to import

You can import an icon from its own file, or from the main package.

import { CameraIcon } from "mochi-icons/CameraIcon";

import { CameraIcon, BellIcon } from "mochi-icons";

Both give you the same icon. A direct import loads only that one file, so it is always the smallest. It also keeps your dev server fast, because it doesn't load the whole set.

How the path works

The path is the package name, a slash, and the component name. The name is the same in the path and in the curly braces.

Other entry points

"Cannot find module" error

If TypeScript can't find a direct import, check these in order:

1. Spelling and capitals. CameraIcon works, cameraIcon does not.
2. Your TypeScript settings. In tsconfig.json, set moduleResolution to "bundler" (or "node16"). The old "node" setting can't see per-icon paths.

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}