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

BoxIcons

https://github.com/atisawd/boxicons

MITMIT

1,634 Icons

Copyright © 2024 rocketclimb

DiscordGitHub

alarm add

TS
ESM
CommonJS
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
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
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
Learn more...
default
icon-yellow-2xl
icon-yellow icon-2xl
icon-purple-600-sm
icon-purple-600 icon-sm
... show more
Learn more...
Learn more...
Learn more...
default
animate-bounce
animate-ping
animate-pulse
animate-spin
... learn more
Learn more...
Tags
filled

Import the icon component from rocketicons

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.

Colors

See Tailwind colors section to learn more about it.

Stroke width

The outlined icons can have their line width customized.

Shortcuts

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

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.

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.

Animations

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

Styling

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