SF Symbols and Material Symbols
SF Symbols is the icon set of Apple platforms and Material Symbols is the icon set of Android, both variable fonts with weights that match text. Appetite UI draws its icons from one outline set for both.
Why it matters
Icons carry weight and meaning next to text, so the set decides how a screen feels native. SF Symbols come in four rendering modes and Material Symbols have fill, weight, grade and optical size axes.
Mixing the two sets in one platform looks wrong, but keeping two sets in a shared design doubles the work.
SF Symbols and Material Symbols on iOS and Android
Also called SF Symbols, Material Symbols, Icon set. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | SF Symbols | Material Symbols | Lucide, one outline set |
| Weight range | Ultralight to black, matched to San Francisco | 100 (thin) to 700 (bold) | See below |
| Axes | Four rendering modes | Fill, weight, grade, optical size | See below |
In Appetite UI
Icons uses Lucide, one outline style with a stroke of 2 at 24, for both platforms. The Apple and Material pages of the file draw their chrome glyphs from the platform’s own vectors, not from Lucide.
Example
A tab bar draws a house in SF Symbols on iOS and a Material Symbol home on Android; a shared design can instead use one outline icon in both and keep the chrome native.
Common mistakes
- Mixing icon styles in one bar, outline beside filled.
- Scaling an icon without scaling its stroke weight with the text.
- Using a platform symbol in a design for the other platform.
- Icons with no label where the meaning is not obvious.
Questions
What is the difference between SF Symbols and Material Symbols?
SF Symbols is Apple’s set with four rendering modes: monochrome, hierarchical, palette and multicolor. Material Symbols is Google’s variable font with fill, weight, grade and optical size axes, weights 100 to 700.
Can I use SF Symbols on Android?
No, they are meant for Apple platforms. A shared design should use an open set, and Appetite UI uses Lucide for that.
Sources
The pages the facts above rest on, each read October 30, 2026.