Free icons for mobile apps
Tab bar, navigation, action and settings icons drawn on a 24px grid. Every icon has a solid twin for active and selected states.
- Best format
- SVG or React component; vector drawable or PDF from the SVG for native
- Size
- 24px in the UI, 44 to 48px tap targets
- HomeHome icon
- SearchSearch icon
- UserUser icon
- SettingsSettings icon
- BellBell icon
- HeartHeart icon
- PlusPlus icon
- MenuMenu icon
- Chevron LeftChevron Left icon
- Chevron RightChevron Right icon
- Arrow LeftArrow Left icon
- CloseClose icon
- CheckCheck icon
- TrashTrash icon
- EditEdit icon
- ShareShare icon
- FilterFilter icon
- CameraCamera icon
- ImageImage icon
- MicrophoneMicrophone icon
- Map PinMap Pin icon
- WalletWallet icon
- Credit CardCredit Card icon
- LockLock icon
- EyeEye icon
- Eye OffEye Off icon
- Log OutLog Out icon
- RefreshRefresh icon
- DownloadDownload icon
- MessageMessage icon
How to use icons in apps
- 1
Use line and solid together
Line for inactive tabs, solid for the active one. Switch the style above to preview both: every icon here has a solid version.
- 2
Copy the SVG or React code
For React Native, web and Flutter, copy the SVG or React component and render it at 24px.
- 3
Native iOS and Android
Import the SVG into Xcode as a vector asset, or into Android Studio with Vector Asset Studio. Both keep it sharp at every screen density.
- 4
Respect tap targets
Keep the glyph at 24px but give the button at least 44 by 44pt on iOS and 48 by 48dp on Android.
Tips
- Five tabs at most. If you need a sixth, it probably belongs under Settings or More.
- Pair every icon-only button with an accessibility label.
- Keep one style per screen: do not mix filled and line icons except for the active state.
Questions
Can I use these icons in a paid app?
Yes. They are free for commercial use in paid and free apps, including the app store listing, with no attribution required.
How do I use SVG icons in Android and iOS?
In Android Studio, use Vector Asset Studio to import the SVG as a vector drawable. In Xcode, add the SVG to the asset catalog and preserve vector data.
Is there a filled version for active tabs?
Yes. Every icon in this set has a solid version. Switch the style above, or open an icon and choose Solid.