Start here

Add your first icon

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.

Before you launch

The current CLI expects an existing TypeScript React or React Native project with a tsconfig.json file. Run commands from that project's root.

1. Initialize Rocketicons

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.

2. Connect the Tailwind plugin

Installation makes the plugin available, but your project still needs to register it. Add @rocketicons/tailwind to the plugins array in tailwind.config.*:

For CommonJS configuration files, use const rocketicons = require("@rocketicons/tailwind") and add the same value to plugins.

3. Find an icon

Use the icon explorer to choose a collection and exact icon ID. For example, Rocketicons' own rocket is @rc/rc-rocket-icon.

4. Add it

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.

Today the CLI generates TSX in the fixed src/ri directory, adds one icon per command, and uses npm during initialization. JavaScript output and configurable paths belong to a later CLI milestone.

Catalog version: 0.3.1 · Content updated: 2026-08-12