oblador/react-native-vector-icons

★ 17,855TypeScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((repo))
    Icon sets included
      FontAwesome
      Feather
      Ionicons
      Material Design Icons
    How it works
      Icon fonts as text
      Sharp at any size
      Style with color and size
    Platforms
      iOS
      Android
      Expo
      Web
    Integration
      Icon component
      Image source helper
      Custom fonts via Fontello

mindmap root((repo)) Icon sets included FontAwesome Feather Ionicons Material Design Icons How it works Icon fonts as text Sharp at any size Style with color and size Platforms iOS Android Expo Web Integration Icon component Image source helper Custom fonts via Fontello

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add sharp, scalable icons to navigation bars and tab bars across iOS and Android from a single React component without managing any bitmap files.

USE CASE 2

Theme every icon in an app by changing a single color prop, keeping the visual design consistent without touching individual image assets.

USE CASE 3

Convert an icon into an image source object so it can slot into any component that expects a bitmap, such as a map marker or image list row.

Tech stack

TypeScriptReact NativeiOSAndroid

Getting it running

Difficulty · moderate Time to first run · 30min

Requires per-platform native setup for iOS and Android, Expo managed workflow needs additional configuration beyond a standard install.

In plain English

React Native Vector Icons is a library for putting crisp, customizable icons into React Native apps. Instead of shipping bitmap images that go fuzzy at different sizes, it ships icon fonts and renders each glyph as text, so icons stay sharp at any size and can be styled with color, size, borders, padding, and the same style rules you would use on any other piece of text in the app. Typical places people use it are buttons, logos, navigation bars, and tab bars. The project bundles many popular icon sets so you do not have to integrate each one yourself. The README lists actively maintained packs including AntDesign, Feather, FontAwesome, Foundation, Ionicons, MaterialDesignIcons, Octicons, and Lucide, plus a longer list of sets that are no longer maintained upstream but still ship for backward compatibility, such as Entypo, EvilIcons, older FontAwesome versions, Fontisto, MaterialIcons, SimpleLineIcons, and Zocial. You can also bring your own fonts via Fontello or Icomoon. Recent versions moved from a single all-in-one package to a package-per-icon-set approach, so you install only the sets you need. To use it, install the icon-set package, follow the setup guide for iOS, Android, Windows, Expo, or Web, then drop an Icon component into your screens, passing props for name, size, and color. There is also a helper for turning an icon into an image source object so it can plug into other components that expect a bitmap image. The repository is written primarily in TypeScript. You would reach for this when building a React Native UI and want a consistent, theme-able icon system without wiring up font files or maintaining several different icon libraries by hand.

Copy-paste prompts

Prompt 1

I am building a React Native app. Show me how to install the Feather icon set from react-native-vector-icons and add a search icon to my navigation bar header.

Prompt 2

I need a bottom tab bar in React Native using Ionicons for Home, Search, Profile, and Settings. Write the component with react-native-vector-icons.

Prompt 3

Show me how to convert a MaterialDesignIcons icon into an image source object in React Native so I can use it as a custom map marker.

Prompt 4

I use Expo managed workflow. Walk me through the react-native-vector-icons Expo setup so icons appear correctly on both iOS and Android.

Open on GitHub → Explain another repo

← oblador on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.