Interface & UI icon packs

Choosing a UI icon kit

An interface icon kit is a long-term decision: once a product ships with one, swapping it means touching every screen. Choose on coverage, consistency and how you'll use it in code.

Coverage

Count the icons you need today — navigation, actions, status, file types, devices — and add a margin for features you'll build next year. Large kits such as Material Design icons, Phosphor and Tabler have thousands of icons; smaller ones like Feather and Radix are tighter but lighter.

Weights and variants

Some kits come in several weights or in outline and filled pairs. Filled variants are useful for selected tabs and active states; multiple weights let headings and dense tables use different strokes from the same family.

Using them in code

Every IconHub icon copies as an inline SVG, or as a React or Vue component with size and color props. The SVG sprite tool combines a set into one file, and the API can serve icons straight into your product.

Before you download

• List the icons you need and check the kit covers them.
• Pick one stroke width and size grid for the whole product.
• Use filled variants only for active or selected states.

Related: arrow icons for navigation and pagination, and communication icons for chat and notifications.