Introducing Rocketicons: The Perfect Companion for React and Tailwind CSS Developers
Tags: react, reactnative, tailwindcss, opensource
Published: 2024-05-24 20:00:32

Hey there,

I'm thrilled to announce a project that's been in the works - Rocketicons! This project has been a collaborative effort with a talented friend of mine.

Our journey with [Rocketicons](https://rocketicons.io) started when we encountered the challenges of maintaining separate codebases for web and mobile platforms while developing a solution for sharing expenses via PIX, a Brazilian instant payment method. The duplication headaches were real, causing more inefficiencies than we cared to count. That's when we decided it was time for a change.

Enter [React](https://react.dev), [React Native](https://reactnative.dev), and [Expo](https://expo.dev). By unifying our development stack, we streamlined our workflow considerably. Yet, one crucial piece was missing: a comprehensive library for essential tasks like icons and components. As we delved further into our development journey, we realized there were more gaps to fill, including robust boilerplates and other essential necessities.

And thus, [Rocketicons](https://rocketicons.io) was born. The first tool we’ve published to address these challenges. Rocketicons is an icon library designed specifically for [Tailwind CSS](https://tailwindcss.com) and fully compatible with React Native. And it's just the beginning. Our mission is to empower developers like you to effortlessly share codebases across platforms, boosting productivity while ensuring consistency. We're also working on solutions for the other problems we've identified, so stay tuned for more tools to come!

#### Why Tailwind CSS?

I have to admit, I never liked Bootstrap much, but I absolutely love Tailwind CSS! It might sound insane, but here’s why I think it’s a game-changer:

- **Utility-First Approach**: Say goodbye to digging through endless CSS files. Tailwind's utility-first approach means styling directly within HTML, making development faster and code more maintainable.
- **Customization**: Tailwind is like a chameleon — it adapts to your design preferences. With its high configurability, we can tailor it to fit our exact needs, ensuring a sleek and cohesive user interface every time.
- **Performance**: Small CSS bundles? Yes, please! By only including the styles we need, Tailwind keeps our applications lightning fast.
- **Community Support**: It's not just a framework; it's a family. The vibrant Tailwind community offers a treasure trove of resources, plugins, and support, making troubleshooting a breeze and best practices a cinch to learn.

I can't see any reason not to use Tailwind CSS — it's truly revolutionized how we approach styling.

#### Now, let's talk [Rocketicons](https://rocketicons.io) features:

- **Tailwind CSS Integration**: Style your icons effortlessly with Tailwind's utility-first approach.
- **React Native Support**: Seamlessly use the same icons across web and mobile platforms.
- **Consistent Design**: Keep your applications looking sharp and feeling cohesive.
- **Easy to Use**: Use Tailwind classes to avoid mixing HTML attributes with styles, making the code easier to understand and style, you'll be up and running in no time.

Still not convinced? Take a peek at just how simple it is to integrate Rocketicons into your projects:

```javascript
// Example for a React project
import { RcRocketIcon } from "rocketicons/rc";

const MyComponent = () => (
  <div>
    <RcRocketIcon className="icon-rose-500 border border-slate-600 rounded-lg bg-slate-50" />
  </div>
);
```

For React Native, no code changes are needed.

```javascript
// Example for a React Native project
import { RcRocketIcon } from "rocketicons/rc";

const MyComponent = () => (
  <div>
    <RcRocketIcon className="icon-rose-500 border border-slate-600 rounded-lg bg-slate-50" />
  </div>
);
```

![Sample Code Rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gea0e9m0tlpq6zaw1qb.png)

Ready to embark on this journey with us? We're beyond excited to share [Rocketicons](https://rocketicons.io) with the developer community and can't wait to hear your feedback and contributions. 

Dive into our documentation or visit our [GitHub repository](https://github.com/rocketclimb/rocketicons) for everything you need to get started, and let's make some coding magic happen!

Dive into our [documentation](https://rocketicons.io/docs/usage) or on [GitHub repository](https://github.com/rocketclimb/rocketicons) for everything you need to get started and let's make some coding magic happen!

Thank you for your consistent support, and let's keep writing countless lines of stellar code!

---


_I've wrote a [article on LinkedIn](https://www.linkedin.com/pulse/empower-your-learning-journey-why-personal-projects-matter-amorim-ctoof/?trackingId=lKT5%2BliUTQm%2B5Gv%2F0E%2FgHw%3D%3D) sharing how this project has improved me as a professional._

![Take a look at how this project has improved me as a professional](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whlshd14gu90cv4g0tvy.png)