Cosmos Icons

How to use

React Component (Recommended)

Download the .tsx file and place it in your components directory. The icon is fully self-contained with embedded CSS animations -- zero dependencies.

Step 1: Download & save the file

your-project/
  src/
    components/
      RocketIcon.tsx    <-- place here

Step 2: Import & use

import { RocketIcon } from './components/RocketIcon';

function App() {
  return (
    <div>
      <RocketIcon />           {/* default 24px */}
      <RocketIcon size={32} /> {/* custom size */}
      <RocketIcon size={48} /> {/* larger */}
    </div>
  );
}

HTML / Plain SVG (Universal)

Use "Copy SVG" to grab the raw SVG markup. Paste it directly into any HTML file -- animations are embedded via CSS inside the SVG, so it works everywhere with no JavaScript required.

<!-- Just paste the SVG directly -->
<div class="icon-wrapper">
  <svg width="24" height="24" viewBox="0 0 20 20" ...>
    <style>/* animations included */</style>
    <!-- icon paths -->
  </svg>
</div>

Props & Customization

Use "Copy SVG" to grab the raw SVG markup. Paste it directly into any HTML file -- animations are embedded via CSS inside the SVG, so it works everywhere with no JavaScript required.

Prop

Type

Default

Description

size

number

Width and height in pixels

Each icon uses scoped CSS class names for animations. If you use multiple icons on the same page, the animations will work independently without conflicts.

The viewBox is designed at 20x20 and scales cleanly to any size. Recommended sizes: 16, 20, 24, 32, or 48px.

Built with ❤️ by @tranmautritam. Made in Framer

How to use

Back

Icons

Built for the Future

Download