Adopt variable color in SF Symbols

Description: Explore how you can use variable color to make SF Symbols even more expressive. We’ll show you how system-provided symbols use variable color and provide best practices and guidance for using it effectively. We’ll also help you learn how to incorporate variable color into custom symbols using the SF Symbols app and its annotation tools.

Variable Color

  • new SF Symbols feature
  • allows you to affect the appearance of a symbol using a percentage value
  • by changing this value, you can create symbols that reflect values that can change over time
  • can be previewed in the SF
  • all rendering modes support it
  • not all symbols support it
  • custom symbols support


  • the various states/layers of each symbol are evenly spaced out between 0 and 100 percent
  • 0% is a special case where no layers will be active
  • anything above 0% will have at least the first layer active

Missing anything? Corrections? Contributions are welcome 😃


Written by

Federico Zanetello

Federico Zanetello

Software engineer with a strong passion for well-written code, thought-out composable architectures, automation, tests, and more.