Skip to main content
SF Symbol Actions
Updated over a week ago

Set SF Symbol

A Set SF Symbol action replaces one SF Symbol with another.

  • Target: Select the image element that this action will affect

  • SF Symbol: Select the new icon

  • Variable Progress: Turn on your new icon's variable color (if applicable) and choose its progress

  • Replace Animation: Choose whether or not to animate the new icon into view

    • By Layer: Choose whether to animate in the full icon at once or each layer sequentially (only applicable to some icons)

    • Direction: Specify how the icon is animated; options are Down Up, None Up, and Up Up.

      • Down Up: the existing icon scales down and fades out; the new icon scales up and fades in

      • None Up: the existing icon fades out; the new icon scales up and fades in

      • Up Up: the existing icon scales up and fades out; the new icon also scales up and fades in

Set Symbol Effect

A Set Symbol Effect action adds motion to an SF Symbol in one of six animation types.

  • Target: Select the image element that this action will affect

  • Animation: Choose the animation type; options are Appear, Disappear, Pulse, Bounce, Scale, or Variable Color (descriptions below are from Apple)

Appear

"Causes a symbol to gradually emerge into view"

  • Direction: Specify how the icon is animated into view; options are Up or Down

    • Up: the icon scales up as it fades into view

    • Down: the icon scales down as it fades into view

Disappear

"Causes a symbol to gradually recede out of view."

  • Direction: Specify how the icon is animated out of view; options are Up or Down

    • Up: the icon scales up as it fades out of view

    • Down: the icon scales down as it fades out of view

Pulse

"Varies the opacity of a symbol over time."

  • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

  • Speed: Choose how fast or slow the animation should be; options are 0.25x, 0.5x, 1x, 1.5x, and 2x

  • Repeat: Choose how many times the animation should repeat before ending; select "continuous" to repeat indefinitely by sliding the slider all the way right

Bounce

"Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state."

  • Direction: Specify whether the icon scales up or down from its original size as it bounces; options are Up or Down

    • Up: the icon scales up as it fades out of view

    • Down: the icon scales down as it fades out of view

  • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

  • Speed: Choose how fast or slow the animation should be; options are 0.25x, 0.5x, 1x, 1.5x, and 2x

  • Repeat: Choose how many times the animation should repeat before ending; select "continuous" to repeat indefinitely by sliding the slider all the way right

Scale

"Changes the size of a symbol, increasing or decreasing its scale."

  • Direction: Specify whether the icon scales up or down; options are Up or Down

    • Up: the icon scales up, resulting in a larger final icon

    • Down: the icon scales down, resulting in a smaller final icon

  • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

  • Speed: Choose how fast or slow the animation should be; options are 0.25x, 0.5x, 1x, 1.5x, and 2x

Variable Color

"Incrementally varies the opacity of layers within a symbol."

  • Layer Style: Choose which layers are visible as they animate in; options are Cumulative or Iterative

    • Cumulative: layers animate in and stay visible until all layers are visible

    • Iterative: layers animate in one at a time, with each layer disappearing as the next layer comes into view

  • Hide Inactive Layers: Choose to show a lower opacity version of all layers at all times (on) or only show the

  • Reverse: Choose whether to ping pong (on) or loop (off) the layers' opacity

  • Speed: Choose how fast or slow the animation should be; options are 0.25x, 0.5x, 1x, 1.5x, and 2x

  • Repeat: Choose how many times the animation should repeat before ending; select "continuous" to repeat indefinitely by sliding the slider all the way right

Did this answer your question?