Interactive symbol states
Symbols play a vital role in communicating interface state changes. They help users understand when elements are selected, pressed, or disabled.
State changes in symbols should be clear but subtle:
- Selected — filled variant or stronger color
- Pressed — subtle scale change or highlighted state
- Disabled — reduced opacity or gray color
- Active — color accent or weight increase
- Error — change to alert color
SF Symbols provides specific variants designed for different states. For instance, a bookmark symbol has outlined and filled versions to show the saved status. These built-in variations ensure consistent behavior across the interface.
Pro Tip: Use symbol variants rather than color alone to show state changes — this ensures clarity in all accessibility modes.
