5 Best Solid Icon Libraries for Websites and Apps

Filled icons can make a selected tab or saved bookmark easy to spot, but their weight varies a lot between families. These five libraries offer useful options for websites and apps. Try a few beside your real labels before committing to a set.

1. Heroicons — straightforward product navigation

Heroicons includes solid and outline variants that are useful to compare in a product interface. It’s worth trying for common navigation and account actions where recognizable shapes matter more than decorative detail.

Test home, bookmark, and user symbols in a sidebar. If a filled bookmark means saved, keep that interpretation throughout the product. Inspect the smallest size before choosing a selected-state treatment; a clear shape at a large preview size can become dense in a toolbar.

Explore Heroicons

2. Bootstrap Icons — broad everyday coverage

Bootstrap Icons can be used independently of the Bootstrap framework and offers SVG delivery options. It’s a practical option when a website needs familiar interface symbols across forms, file actions, and navigation.

Build a compact action row for a file card, using appropriate filled symbols where available. Keep the controls comfortably spaced even if the artwork is small. Check each icon name and variant in the official catalog instead of assuming every outline has an identical filled counterpart.

Explore Bootstrap Icons

3. Phosphor — explore weight and tone

Phosphor provides multiple icon weights, including fill. This makes it useful to explore when a project needs to compare lighter everyday controls with more prominent selected or emphasized states in the same family.

Try a music library navigation with a lightweight default and a filled selected item. Keep the selected meaning clear beyond color, and check whether the change in weight makes one row look unexpectedly larger. Set a shared weight convention rather than choosing independently on each screen.

Explore Phosphor

4. Tabler — pair filled choices with a broader family

Tabler exposes outline and filled selections in its browser. Consider it when the rest of the interface already uses Tabler and only a few controls need a heavier visual treatment.

Search for the exact favorites and status symbols needed in your dashboard before adopting a state pair. Verify that the filled version exists and reads correctly at your chosen size. Keep the wider outline collection as a family reference instead of mixing in an unrelated solid symbol.

Explore Tabler

5. Remix Icon — line and fill options for UI

Remix Icon organizes a large interface-oriented collection with line and fill naming. Try it when you need the same visual direction across actions, navigation, and more specific product features.

Compare a line and fill treatment in a commerce account menu. Use a visible label for actions that are ambiguous, even when the silhouette is attractive. The family’s naming conventions can help implementation, but the final interaction still needs a sensible accessible name.

Explore Remix Icon

Before you decide

Test a few filled symbols beside their text at the actual display size. Check whether the center of a shape stays recognizable and whether its visual weight competes with the label. A small icon should not require someone to decode a detailed silhouette.

Keep the chosen family, variant names, and selected-state rules in your component reference. Review each library’s current terms before distributing assets with your product.

Related SVG Repo guides

Accessible icon labels and buttons

5 ways to improve app navigation icons

Browse icon collections