home/use-cases/icons-for-mobile-apps
// USE CASE

Icons for Mobile Apps

Mobile interfaces have strict constraints that desktop UIs do not. Touch targets must be at least 44x44px for reliable tapping. Icons must be readable on varying screen qualities from budget Android devices to Retina displays. Navigation patterns like tab bars and hamburger menus rely heavily on universally recognized icons.

mobile app iconsreact native iconsicons for mobile uipwa icons

WHY THIS MATTERS

//On mobile, users tap icons with their thumb while moving. An icon that is too small, too ambiguous, or too similar to an adjacent icon causes tapping errors. These errors create frustration that leads to app abandonment.

RECOMMENDED FOR ICONS FOR MOBILE APPS

★ TOP PICK

Lucide Icons

12,0001,400 iconsISC

A clean, consistent open-source icon library with 1400+ icons, forked from Feather Icons with active maintenance and TypeScript support.

npm install lucide-react
Full Guide →✓ TypeScript✓ Tree-shakable
#2

Heroicons

21,000292 iconsMIT

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS. Available in outline and solid styles with 292 icons.

npm install @heroicons/react
Full Guide →✓ TypeScript✓ Tree-shakable
#3

Phosphor Icons

8,0001,248 iconsMIT

Flexible icon family with 6 weights including thin, light, regular, bold, fill and duotone. Over 1200 icons available.

npm install @phosphor-icons/react
Full Guide →✓ TypeScript✓ Tree-shakable

DESIGN TIPS

01

Minimum touch target is 44x44px — the visible icon can be smaller but the tappable area must not be

02

Use 24px to 28px visible icon sizes for tab bars and action buttons

03

Filled icons work better than outline icons in mobile tab bars — they are more visible at a glance

04

Avoid icons that are too similar — home, house, and building icons can be confused on small screens

05

Always pair tab bar icons with text labels

MUST-HAVE ICONS FOR THIS USE CASE

homesearchbellusermenuarrow-backshareheartbookmarkcameramore-horizontalcheck

COMMON MISTAKES TO AVOID

Touch targets smaller than 44x44px

Icon-only tab bars without text labels

Using the same icon for multiple different actions

Outline icons that are too thin to read on low-quality screens

OTHER LIBRARIES TO CONSIDER

Tabler IconsMIT
5,500 icons
Remix IconApache 2.0
2,800 icons
Feather IconsMIT
287 icons
Bootstrap IconsMIT
1,800 icons
Radix IconsMIT
318 icons

BROWSE OTHER USE CASES

Icons for SaaS ProductsIcons for DashboardsIcons for Landing PagesIcons for EcommerceIcons for Dark ModeIcons for Developer ToolsIcons for Next.js App Router