Phosphor Fill Icons
1,512 icon elements1,512 free icons from the Phosphor family in the filled variant. Every shape is rendered as a solid form, giving each icon maximum visual weight and presence. Perfect for active states, primary navigation, and interfaces where icons need to anchor the layout. MIT licensed SVGs.
Filled icons are the loudest voice in any icon family. Where line icons suggest, filled icons state. These 1,512 Phosphor Fill icons replace every open stroke with a solid shape, creating icons that hold their ground against busy backgrounds, colorful imagery, and competing interface elements.
When solid beats outline
There are specific design contexts where filled icons outperform their outlined siblings. Active navigation states, where you need the selected item to feel visually heavier than unselected options. Tab bars on mobile, where filled shapes are more recognizable at small sizes. Dark mode interfaces, where solid shapes maintain presence better than thin strokes against dark backgrounds. Bottom navigation in iOS and Android apps, where Apple and Google both default to filled icons for the active tab.
Practical applications
Active/selected states paired with outlined inactive states from Phosphor Regular
Mobile tab bars where recognition speed matters more than aesthetic delicacy
Dark mode where solid shapes handle low contrast better than strokes
Notification badges and status indicators that need to pop
Icon buttons where the touch target benefits from filled visual weight
Technical details
1,512 icons rendered as solid filled shapes
Same icon designs as all Phosphor variants, consistent pixel grid
Single-color SVG with clean, minimal paths
MIT licensed for commercial and personal projects
Pairs naturally with Phosphor Regular for active/inactive state patterns
The classic pattern in modern app design is to use filled icons for active states and outlined icons for inactive states. Phosphor makes this trivial because the filled and regular variants share identical dimensions and visual proportions. Swap between them with a simple class change or component prop.
For the outline counterpart, grab Phosphor Regular. For a middle ground between filled and outlined, explore Phosphor Duotone. Browse every style in our icon packs library.
