Loading...
Rocketicons lets you search thousands of open-source icons and add only the components your project uses. The CLI writes them into your source tree, so your app never imports a full icon collection and does not need tree-shaking to make unused icons disappear.
The current CLI expects an existing TypeScript React or React Native project with a tsconfig.json file. Run commands from that project's root.
Initialization creates:
It also adds the @/ri/* alias to tsconfig.json and installs @rocketicons/utils and @rocketicons/tailwind through npm. Those are small shared dependencies used by the generated components and Tailwind integration.
In a Tailwind CSS 4 web app, initialization finds the active stylesheet containing @import "tailwindcss" and adds the Rocketicons plugin automatically:
Run npx rocketicons doctor --json to check the Tailwind version, stylesheet loading, plugin registration, and Vite or PostCSS integration. If the app has more than one active Tailwind stylesheet, pass --stylesheet-path src/path/to/styles.css to init. The dry run lists the CSS file that will change before writing it.
Use the icon explorer to choose a collection and exact icon ID. For example, Rocketicons' own rocket is @rc/rc-rocket-icon.
The CLI writes src/ri/icons/rc-rocket-icon.tsx. Import the component from your own source tree:
That is the whole flight plan: find, add, import. Continue with Adding Icons for repeated additions and verification, or open the framework quick starts for setup notes.
The repository CLI build generates TSX or JSX in the fixed
src/ridirectory, accepts multiple exact icons per command, and detects the project's package manager. Use--dry-runand--jsonto preview changes. These new commands await the next npm release.
Catalog version: 0.4.0 · Content updated: 2026-08-12