Hover Icons (itshover)

Overview

Hover Icons (itshover.com/icons) is an open-source animated icon ecosystem featuring over 2,600+ GitHub Stars. It delivers 180+ standalone React vector icons pre-configured with tactile hover micro-interactions—including kinetic path morphing, elastic spring bounces, 3D rotations, and line-drawing animations.

Key Features

• 180+ Interactive Animated Icons: Carefully orchestrated keyframes and SVG stroke animations triggered seamlessly on pointer hover.
• Zero-Config Copy & Paste: Each animated icon is self-contained with no heavy runtime wrapper overhead.
• Tailwind & Framer Motion Integration: Seamlessly inherits Tailwind utility classes (size-5, text-primary) and motion physics.
• Universal UI Coverage: Comprehensive categories covering essential navigation, media controls, file management, and social badges.

Installation & Quick Start

# Install core motion and utility dependencies
npm install framer-motion clsx tailwind-merge

import React from 'react';
import { BellAlertIcon } from '@/components/icons/bell-alert';

export function NotificationBadge() {
  return (
    <button className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-card border border-border hover:bg-muted/60 transition-colors group">
      <BellAlertIcon className="size-4 text-muted-foreground group-hover:text-foreground" />
      <span className="text-xs font-medium text-foreground">Alerts</span>
    </button>
  );
}

Why Choose Hover Icons?

1. Tactile Feedback: Elevate button, card, and navbar interactions with delightful, instant micro-animation feedback.
2. Clean Component Architecture: Pure TypeScript JSX components that drop right into your components directory.