Development · Website
Font Awesome Docs: Animating Icons
Official documentation for adding built-in CSS animations to Font Awesome icons
This reference guide details Font Awesome's built-in CSS animation classes and custom properties. It demonstrates how to apply and tweak motion effects like beat, bounce, buzz, flip, float, and spin directly with CSS classes. It is useful for front-end developers wanting subtle UI motion without custom keyframes.
What it's for
- Create animated loading spinners with spin or spin-pulse classes
- Add pulsing or beating effects to notification badges and heart icons
- Indicate validation errors by shaking input-adjacent warning icons
- Fine-tune animation timing, scale, and rebound using CSS custom properties
Features
- Comprehensive motion classes including beat, fade, bounce, flip, buzz, float, and jello
- Multiple spin configurations like smooth spin, stepped spin-pulse, and snap pauses
- Configurable CSS custom properties for duration, scaling, opacity, and jump heights
- Built-in reverse modifiers such as fa-spin-reverse
- Troubleshooting tips for Safari clipping and animate.css naming conflicts
Pricing
Freemium. Core icons and animation utilities are free; Pro plans unlock additional icon styles.
Details
- Type
- Website
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Web, Code library
- For
- Front-end web developers and UI designers using Font Awesome
- Alternative to
- animate.css, Lordicon, Iconoir
- Tags
- icons, css animation, font awesome, web design, ui
Why it was saved
- @kail_designs: Reference for animating icons in Font Awesome projects.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated