Free Icon Sets for Mobile Apps: iOS & Android Design Resources

2026-07-03·Guides

Key Takeaways

  • iOS uses SF Symbols (6,000+ system icons) and Android uses Material Design Icons (5,000+), but third-party free sets often fill gaps these platforms miss.
  • Cross-platform mobile apps need a single icon set that looks native on both iOS and Android—libraries like Phosphor and Lucide solve this.
  • Adaptive icons (iOS 18+ tinted mode, Android themed icons) require sets with multiple style variants.
  • All libraries below are free for commercial use, with licenses clearly marked.

---

Why Mobile Icons Are Different

I built a fitness app two years ago and made a rookie mistake: I used the same icon set for the web dashboard and the mobile app. The icons looked fine on a 27-inch monitor but turned into blurry smudges on a 6-inch phone screen at 3x retina resolution.

Mobile icons have unique constraints: they need to render crisply at 24x24dp and 48x48dp, work in dark and light modes, and respect platform conventions (iOS users expect SF Symbol-style line weights; Android users expect Material-style shapes). Below are the sets I now use for every mobile project, grouped by platform.

iOS-Focused Icon Sets

1. SF Symbols (Apple, Built-in)

  • Count: 6,000+ icons (iOS 18)
  • Format: SF Symbol font, PNG export via SF Symbols app
  • License: Apple (free for iOS/macOS apps)
  • Why I use it: Native rendering, automatic weight matching with San Francisco text. The animation presets (bounce, scale, pulse) work with SwiftUI out of the box.
  • Limitation: Cannot use outside Apple platforms. Web and Android need alternatives.

2. Phosphor Icons (SF-Style Weight Options)

  • Count: 1,888 icons
  • Styles: Thin, light, regular, bold, fill, duotone (6 variants)
  • License: MIT
  • Why it works for iOS: The "thin" and "light" weights match SF Symbols' default 1.5px stroke thickness. Use Phosphor when you need icons SF Symbols does not provide (e.g., cryptocurrency, niche industry symbols).
  • Real example: I used Phosphor duotone icons in a meditation app. The two-tone style let me match the app's brand colors while keeping platform consistency.

3. Tabler Icons

  • Count: 5,100+
  • Styles: Outlined, filled
  • License: MIT
  • Why I mention it: The filled variant is a solid SF Symbols alternative. Tabler has niche icons like "circuit-battery" and "antenna-bars" that SF Symbols lacks. Average SVG size is 0.8 KB—practically zero overhead.

Android-Focused Icon Sets

4. Material Design Icons (Google, Built-in)

  • Count: 5,000+
  • Styles: Outlined, rounded, sharp, filled, two-tone
  • License: Apache 2.0
  • Why I use it: No extra integration needed in Android Studio. Jetpack Compose has first-class support via `painterResource()`.
  • Themed icons: Android 13+ supports monochrome themed icons on the home screen. Material Design Icons work with this system automatically.
  • Limitation: The "sharp" style looks aggressive on iOS. Stick to "outlined" or "rounded" for cross-platform apps.

5. Lineicons (Android-Focused Free Set)

  • Count: 5,000+ (free tier: 500)
  • Format: SVG, Icon Font, React, Figma
  • License: Free tier requires attribution
  • Why I like it: Specifically designed for mobile interfaces—icons have generous padding and tap-target-friendly proportions. The line style is slightly thicker (2.5px) than Material, which improves readability on small screens.

6. Eva Icons

  • Count: 480 icons
  • Styles: Outline, fill
  • License: MIT
  • GitHub stars: 8,000+
  • Why I use it: Created by the Nebular team for mobile-first React Native apps. Each icon has precise pixel alignment at 24x24dp. Small set, but every icon is carefully crafted.
  • Real example: Used in several React Native production apps (Uber Eats clone tutorials recommend Eva Icons).

Cross-Platform Icon Sets (iOS + Android)

7. Lucide

  • Count: 1,500+
  • Style: Single clean line style (2px stroke)
  • License: ISC
  • Why I use it for mobile: The 2px stroke looks sharp on both iOS and Android. Works with React Native via `lucide-react-native` package—just `npm install` and import.
  • Tip: For bottom navigation bars, Lucide's consistent 24x24 viewBox keeps all tabs visually balanced.

8. Ionicons

  • Count: 1,300+
  • Styles: Outline, filled, sharp
  • License: MIT
  • Why I like it: Built by the Ionic Framework team specifically for hybrid mobile apps. The "sharp" variant is identical to iOS tab bar icons in appearance. Works with React Native, Flutter, and Ionic out of the box.

9. Heroicons 2.0 (Mobile-Sized)

  • Count: 292 icons (24px and 20px variants)
  • Styles: Outline, solid, mini (16px for tight UI)
  • License: MIT
  • Why I use it: The 20px and 16px variants are perfect for list items and table rows where 24px icons feel too large. The mini set at 16x16 is rare in free libraries.

10. Feather Icons (Mobile-First)

  • Count: 287 icons
  • Style: Single line style, 2px stroke
  • License: MIT
  • Why I still use it: Feather was designed by Cole Bemis with a 24x24 grid optimized for mobile. Each icon path is a single `` element—trivial to style with React Native's `react-native-svg`. Small but legendary.

11. Font Awesome Free (Mobile Edition)

  • Count: 2,025 icons (free tier)
  • Format: SVG, Webfont
  • License: SIL OFL (icons), MIT (code)
  • Why I mention it: Many mobile devs skip Font Awesome because of its web heritage, but the SVG sprite approach works well in React Native. Load the sprite once, reference icons by ID. Avoid the webfont on mobile—it blocks rendering.

12. Boxicons

  • Count: 1,600+
  • Styles: Regular, solid, logo
  • License: CC BY 4.0 (free with attribution)
  • Why I like it: Logo icons (GitHub, Twitter, WhatsApp) are useful for social-sharing buttons in mobile apps. The regular style is 1.5px—thinner than most sets, giving iOS-like lightness.

13. Remix Icon

  • Count: 2,500+
  • Styles: Line and fill
  • License: Apache 2.0
  • Why I use it: Every icon has both line and fill versions. Switching between them on tab selection is a single prop change. The line weight (1.8px) splits the difference between iOS (thin) and Android (thick) preferences.

14. IconSax (by Vuesax)

  • Count: 2,000+
  • Styles: Linear, bold, bulk, outline, two-tone (5 variants)
  • License: MIT
  • Why I mention it: The "bulk" style (filled with transparent inner details) mimics iOS 18's new tinted icon mode perfectly. If you want your app to look native on iOS 18 without using SF Symbols, IconSax is the best alternative I have found.

15. Majesticons

  • Count: 240 icons
  • Styles: Line and solid
  • License: MIT
  • Why I like it: 2px stroke, but with rounded caps and joins—softer than Lucide and Feather. Best for lifestyle and wellness apps where hard corners feel too corporate. Small set, but the visual personality makes up for it.

Comparison Table: Top 5 Cross-Platform Mobile Icon Sets

LibraryCountStylesStrokeLicenseReact Native Support
------------------
Lucide1,500+1 (line)2pxISCYes (lucide-react-native)
Ionicons1,300+3 variants1.5–2pxMITYes (built-in)
Phosphor1,8886 variantsAdjustableMITYes (phosphor-react-native)
Remix Icon2,500+2 variants1.8pxApache 2.0Manual SVG
IconSax2,000+5 variantsAdjustableMITYes (iconsax-react-native)

Adaptive Icon Tips for iOS 18+ and Android 15+

  • iOS tinted mode (iOS 18+): Users can tint all home screen icons with a custom color. If your app icon has a solid background, use a transparent-background glyph so it blends with the user's tint choice. Libraries with "fill" and "outline" variants (Phosphor, IconSax) handle this automatically.
  • Android themed icons (Android 13+): Same concept—monochrome adaptive icon with a transparent background. Material Design Icons and Tabler's outlined variants work best.
  • Dark mode: Always test icon sets in both light and dark themes. Icon sets with stroke-based designs (Lucide, Feather) need no adjustment. Filled icons may need color inversion.

Performance Checklist for Mobile Apps

  • Tree-shake aggressively: Do not import an entire icon library. Most React Native packages support named imports (`import { Home } from 'lucide-react-native'`), which bundle only the icons you use.
  • Avoid webfonts on mobile: Icon fonts block text rendering until the font loads. SVG components render progressively.
  • Use `` caching: React Native's `react-native-svg` caches rendered SVGs. If you reference the same icon multiple times, it draws once and reuses.
  • Test on low-end devices: A screen with 50+ icons from an unoptimized set can add 200ms of render time on a budget Android phone. Profile with Android Studio's GPU inspector.

Frequently Asked Questions

1. Can I use SF Symbols in a React Native or Flutter app?

No. SF Symbols are proprietary Apple fonts and cannot be distributed with non-Apple-platform apps. Use Phosphor or Lucide as cross-platform alternatives. On the iOS side of your app, you can use SF Symbols natively in Swift/SwiftUI, but your Android and web builds need a different set.

2. What is the best icon size for mobile bottom navigation bars?

24x24dp is the standard for both iOS Human Interface Guidelines and Material Design 3. Some libraries offer 20x20 or 16x16 variants for tighter layouts. Always provide a 48x48dp touch target around the icon—the icon size and tap target are different things.

3. Do I need different icon sets for iOS and Android in a cross-platform app?

No. A single well-chosen set (Lucide, Phosphor, or Ionicons) looks native on both platforms when given the correct styling. The key differences are stroke thickness preferences (iOS users expect thinner lines) and corner radius (iOS is rounded, Android can be sharper). Libraries with weight variants let you adjust this per platform.

4. How do I handle icon states (selected, unselected, disabled) in mobile apps?

Most libraries provide outline and fill variants of the same icon. Use outline for unselected tabs, fill for selected tabs. Set opacity to 0.4 for disabled states. Some sets like IconSax offer dedicated "bulk" and "two-tone" styles specifically designed for state transitions.

---

*Last updated: July 2026. Platform guidelines and icon counts may change with OS updates.*