Animated icons


Usage

Animation reflects the action an icon performs in a way that adds polish and delight.

The animation of each icon is aligned with both the visual design and action they perform.

Transitions

Transitions connect animated icons between two visual states. Transitioning between two icons signifies that they are linked, and that pressing one icon makes the other icon available.

Transitions show the connection between two icons.
Transitions are used to toggle between icons, such as between on and off states.

Emphasis

Animated icon transitions can use either simple or complex motion based on the level of emphasis preferred.

Animated icon transitions can use either simple or complex motion based on the level of emphasis preferred.

  • Icons that aren’t prominent use a simple shared motion
  • Icons that are an important part of an app can be emphasized with complex motion

Simple

Use shared motion on icons that don’t need to be emphasized. Fading, scaling, or rotating are simple ways to transition between icons.

Complex

Detailed animations call attention and adds delight to important icons.
Simple icon transitions are used when functionality is more important than style. Exiting icons simply fade out and entering icons fade in, subtly scaling up in size.
Detailed icon transitions are used on important UI elements, like controls in a music app.

Duration

The more complex an icon animation is, the longer duration it needs to have to avoid feeling rushed. To keep consistency across an app, use...

The more complex an icon animation is, the longer duration it needs to have to avoid feeling rushed. To keep consistency across an app, use the same duration for icons that have similar levels of complexity. Most icons will fit into these three groups of recommended durations:

  • Simple icon animations: 100ms
  • Average icon animations: 200ms
  • Complex icon animations: 500ms
1. Simple: 100
2. Average: 200
3. Complex: 500

Stagger

Sets of icons can use staggered timing to perform entrances fluidly. They animate from left to right to give a sense of progression.

Sets of icons can use staggered timing to perform entrances fluidly. They animate from left to right to give a sense of progression.

Icons in an app bar enter from left to right with staggered timing.

States

Icon animations can be used to reinforce a change in state.

Icons animate to indicate they have changed state by being selected.

Theming

Animations should reflect a brand’s style.

These icon animations are inspired by the brand logo and loading state animations.

1. Icon animations
2. Logo animation
3. Loading animation

Up next