Animating Icons

Iconfyra includes 18 built-in animation classes using the icf-anim- prefix. You can also create custom animations with standard CSS.

Quick Reference #

Spin (Continuous Rotation) #

The icf-anim-spin class applies a smooth, continuous 360-degree rotation. Perfect for loading indicators.

<!-- Loading spinner -->
<i class="icf-solid icf-spinner-third icf-anim-spin"></i>

<!-- Spinning gear -->
<i class="icf-solid icf-cog icf-anim-spin"></i>

<!-- With loading text -->
<button disabled>
    <i class="icf-solid icf-spinner icf-anim-spin"></i> Loading...
</button>

Pulse (Stepped Rotation) #

The icf-anim-pulse class creates an 8-step rotation animation rather than a smooth spin. This gives a more mechanical, clock-like effect.

<!-- Stepped rotation (8 steps per revolution) -->
<i class="icf-solid icf-spinner icf-anim-pulse"></i>

<!-- Great for syncing/processing indicators -->
<i class="icf-solid icf-circle-notch icf-anim-pulse"></i>

Beat (Heartbeat Pulse) #

The icf-anim-beat class creates a pulsing scale effect. Great for drawing attention to notifications or likes.

<i class="icf-solid icf-heart icf-anim-beat"></i>

Fade (Pulse Opacity) #

The icf-anim-fade class pulses the icon's opacity. Useful for subtle "waiting" or "listening" indicators.

<i class="icf-solid icf-bell icf-anim-fade"></i>

Bounce #

The icf-anim-bounce class adds a vertical bouncing motion. Perfect for scroll-down indicators.

<i class="icf-solid icf-arrow-down icf-anim-bounce"></i>

Shake #

The icf-anim-shake class rotates the icon back and forth. Great for error states or alert notifications.

<i class="icf-solid icf-bell icf-anim-shake"></i>

Flip #

The icf-anim-flip-horizontal and icf-anim-flip-vertical classes create 3D flip animations.

<i class="icf-solid icf-arrows-rotate icf-anim-flip-horizontal"></i>
<i class="icf-solid icf-arrows-rotate icf-anim-flip-vertical"></i>

Beat Fade #

The icf-anim-beat-fade class combines scale and opacity for a heartbeat with glow effect.

<i class="icf-solid icf-heart icf-anim-beat-fade"></i>

Spin Pulse #

The icf-anim-spin-pulse class spins with a pause between rotations. Useful for periodic loading states.

<i class="icf-solid icf-spinner-third icf-anim-spin-pulse"></i>

Ring #

The icf-anim-ring class tilts the icon back and forth from the top, like a bell ringing.

<i class="icf-solid icf-bell icf-anim-ring"></i>

Tada #

The icf-anim-tada class creates a celebratory wiggle. Great for success states or achievements.

<i class="icf-solid icf-star icf-anim-tada"></i>

More Animations #

Hover Animations #

Apply animations only on hover for interactive elements:

/* Rotate on hover */
.icon-hover-rotate {
    transition: transform 0.3s ease;
}
.icon-hover-rotate:hover {
    transform: rotate(90deg);
}

/* Scale on hover */
.icon-hover-grow {
    transition: transform 0.2s ease;
}
.icon-hover-grow:hover {
    transform: scale(1.2);
}

/* Spin on hover */
.icon-hover-spin:hover {
    animation: icf-spin 0.5s linear;
}

<a href="/settings">
    <i class="icf-solid icf-gear icon-hover-rotate"></i> Settings
</a>

<button>
    <i class="icf-solid icf-heart icon-hover-grow"></i> Like
</button>

Respecting Reduced Motion #

Always respect the user's motion preferences. Iconfyra's built-in animations automatically disable when the user has enabled "reduce motion" in their OS settings:

@media (prefers-reduced-motion: reduce) {
    [class*="icf-anim-"] {
        animation: none !important;
    }
}