We are live on DevHunt: tool of the week contest

check it out

Floating Icons

An animated background with floating technology icons.

Preview

Interactive Preview
Astro
React
Next.js
Vue.js
Nuxt
Vite
Tailwind CSS

Floating Icons Block

A dynamic background for your landing pages.

Installation

Usage

tsx
import { FloatingIcons } from "@/components/block/floating-icons"

export default function LandingPage() {
  return (
    <div className="relative h-screen bg-black">
      <FloatingIcons className="opacity-50" />
      <div className="relative z-10 flex items-center justify-center h-full">
         <h1 className="text-white text-6xl font-bold">Orix</h1>
      </div>
    </div>
  )
}

Dependencies

@iconify/react

Props

PropTypeDefault
classNamestring-