# 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.

Website: https://docs.fontawesome.com/web/style/animate

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 28 August 2026](https://x.com/kail_designs/status/2093371585940038033): Reference for animating icons in Font Awesome projects.

## Compare

- [Alternatives to Lordicon](https://xiry.app/alternatives/lordicon.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/font-awesome-docs-animating-icons

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.