Command Palette

Search for a command to run...

Loading component...

Components paid Animated icons

Animated icons

A collection of beautifully animated interactive icons with hover effects, click animations, and smooth transitions. Each icon demonstrates different animation techniques using Framer Motion, perfect for creating engaging UI elements.

Dependencies

framer-motionlucide-react

Interaction Type

Click icons to trigger interactive effects

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

Using Icons

import {
  SideBarIcon,
  SourceButton,
  LockSourceButton,
  MusicIcon,
  SpinnerIcon,
} from "@/components/v1/skiper42";

const CustomIcons = () => {
  return (
    <div className="flex gap-4">
      <CopyIcon copyText="copied Hello form skiper ui" />
      <SpinnerIcon color="red" size={20} />
      <SideBarIcon />
      <SourceButton />
      <MusicIcon />
      {/* similar for other */}
    </div>
  );
};
Props
Description

className

Additional CSS classes for styling

color

Color of the spinner bars (for SpinnerIcon)

size

Size of the spinner in pixels (for SpinnerIcon)

copyText

Text to copy when the icon is clicked (for CopyIcon)

Available icons

The component includes 17 different animated icons with included with personal favorite copy icon with clipboard functionality.

Icons
Description

SideBarIcon

Expandable sidebar indicator with width animation

SourceButton

Code brackets with moving arrows and lines

LockSourceButton

3D rotating lock with perspective effect

LogoutIcon

Exit arrow with sliding animation

DollerIcon

Dollar sign with 360° rotation

CopyIcon

Copy/checkmark toggle with clipboard functionality

MusicIcon

Animated waveform bars with play/pause

PlusIcon

Plus/minus toggle with rotation

HamMenuIcon

Hamburger menu with dynamic bar lengths

ChevIcon

Chevron up/down toggle

MailIcon

Triangle alert with shake animation

WorldIcon

Globe with controllable spin animation

FileIcon

Link icon with path drawing animation

TrashIcon

Trash can with lid flip animation

SendIcon

Send arrow with slide-out effect

SpinnerIcon

Loading spinner with fading bars

BellIcon

Bell with ring animation and clapper

Attribution

Icons are used from Lucide with custom animations and interactions.

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext