# Floating Icons Loader

> The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this component allows full customization: you can specify the number of icons to display, their size, and color, and even pass any React icon component to be used. Each icon follows one of three distinct animation paths, creating a dynamic and lively effect as they float, scale, and rotate smoothly across the container. Its flexible design makes it suitable for a variety of applications, from indicating loading states in dashboards and forms to adding a playful visual touch to creative websites. With full Tailwind CSS compatibility and TypeScript support, it’s easy to integrate and adapt to different themes and projects.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/floating-icons-loader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/floating-icons-loader?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt