0.2.8
  • Docs
  • Getting Started
  • Icons
Switch theme
GitHub
    Playground
  • Getting Started
    • Installation
    • Configuration
    • Customization
    • Contributing
  • Using The Icons
    • Adding Icons
    • Colors
    • Dark Mode
    • Responsive Design
    • Shortcuts
    • Sizing Icons
    • Hover, Focus and Other States
    • Styling
  • Icons
    • rocketicons
    • Ant Design Icons
    • BoxIcons
    • Bootstrap Icons
    • css.gg
  • Roadmap

Bootstrap Icons

https://github.com/twbs/icons

MITMIT

2,716 Icons

arrow down up

Import the icon component from rocketicons

TS
ESM
CommonJS

Place the element wherever you need

Sizes

It can be customized or added as your need. Tailwind utilities like size, height and width can be used as well.

Learn more...
default
icon-7xl
icon-6xl
icon-5xl
icon-4xl
icon-3xl
icon-2xl
icon-xl
icon-lg
icon-base
icon-sm
icon-xs
... show more
Colors

See Tailwind colors section to learn more about it.

Learn more...
default
icon-slate-700
icon-gray-300
icon-zinc
icon-neutral-600
icon-stone
icon-red-800
icon-orange-300
icon-amber-900
icon-yellow
icon-lime-200
icon-green-600
icon-emerald-200
icon-teal-500
icon-cyan-600
icon-sky
icon-blue-400
icon-indigo-700
icon-purple-600
icon-fuchsia-800
icon-pink-600
icon-rose-300
... show more
Stroke width

The outlined icons can have their line width customized.

Learn more...
default
stroke-1
stroke-2
stroke-[0.5]
stroke-[1.5]
stroke-[3]
stroke-[3.375]
stroke-[0.375rem]
stroke-[3px]
... show more
Shortcuts

Combine the icons utilities changing the colors and the size on the same time. Use on the format icon-{color}-{size}.

Learn more...
default
icon-yellow-2xl
icon-yellow icon-2xl
icon-purple-600-sm
icon-purple-600 icon-sm
... show more
Dark mode

Powered by Tailwind (by NativeWind on React-native), the dark mode variant can be used defined a different appearance when dark mode is enabled.

Learn more...
Hover, Focus, and and Other States

The web support is total, however the NativeWind support is not complete and there are few limitations as described on the official documentation. Learn more about states.

Learn more...
Animations

The Tailwind's animations work on icons. Custom animations can be created as well.

Learn more...
default
animate-bounce
animate-ping
animate-pulse
animate-spin
... learn more

Styling

Beside the icons-* utilities, all the Tailwind power is at your service, allowing to achive any result your project requires.

Learn more...
Tags
filled

Copyright © 2024 rocketclimb

DiscordGitHub