When you build your app for production, your bundler (Vite, webpack, Next.js and so on) leaves out code you never use. That is called tree-shaking.
For icons, it means this: if you use 3 icons, your users download 3 icons, not the whole set.
Why it works with Mochi Icons
One file per icon. Each icon lives in its own small file.
Modern JavaScript modules. The package uses import and export, which bundlers can follow.
No side effects. The package tells bundlers it is safe to drop any file you don't import.
The icon list is separate. The list of icons used by this website is not in the main package, so it never ends up in your app by accident.
What you should do
Use direct imports. They only ever load the one icon, in any bundler and in development too.
BEST
import { CameraIcon } from "mochi-icons/CameraIcon";
Importing from the main package is fine too. Production builds still drop unused icons. Your dev server may just load the full set while you work.
ALSO FINE
import { CameraIcon } from "mochi-icons";
Check it yourself
Build your app and look at the size of the output. Adding one more icon should only add a few kilobytes. In Vite, vite build prints the size of each file. In Next.js, try @next/bundle-analyzer.
