Managing custom icons in React Native can be challenging, especially with traditional tools like Fontello or Icomoon. These tools often lack dynamic integration with modern frameworks, making the process of adding or updating icons cumbersome and time-consuming.
Monicon offers a modern solution to these challenges, providing a flexible and efficient way to manage icons in your projects. Supporting popular frameworks like React, React Native, Next.js, Vue, Nuxt, Svelte, and more, Monicon simplifies the process of integrating custom icons. With access to over 200,000+ icons from renowned libraries such as Material Design, Feather, and Font Awesome, Monicon ensures you have all the tools you need for a seamless and powerful icon management experience.
Why Use Monicon?
<ul>
<li>Huge Icon Library: Get access to over 200,000 icons from famous sets like Material Design, Feather, and Font Awesome.</li>
<li>Custom Icons: You can create custom icons and use them in your projects. Monicon makes it easy to add your own icons.</li>
<li>Works with Modern Tools: Monicon supports tools like Vite, Webpack, Rollup, and others, so it’s ready for any project.</li>
<li>Fast and Efficient: Monicon loads icons quickly to keep your project running smoothly. No flickering or lagging.</li>
<li>Easy to Use: Works with React, Vue, Svelte, Next.js, and other popular frameworks, making icon integration simple. You can discover icons on the <a href="https://icones.js.org/" target="_blank" rel="noopener nofollow">Icones</a> website.</li>
<li>Customizable: You can easily change the size, color, and other features of the icons to fit your design.</li>
<li>Collaboration: Monicon helps you collaborate with designers to speed up the design process and get better results. <a href="https://www.figma.com/community/plugin/735098390272716381/iconify" target="_blank" rel="noopener nofollow">Iconify Figma Plugin</a> allows you to use icons directly in Figma.</li>
<li>Free and Open Source: Monicon is free to use and open source, so you can use it in any project without restrictions.</li>
</ul>
<a href="https://monicon-docs.vercel.app/" target="_blank" rel="noopener nofollow">📕 Monicon Docs</a>
<a href="https://github.com/oktaysenkan/monicon" target="_blank" rel="noopener nofollow">💻 Monicon GitHub</a>
<h2>1. Create a New Project</h2>
Run the following command in your terminal to create a new Expo project:
<pre><code class="language-bash">npx create-expo-app my-new-app
cd my-new-app
</code></pre>
<ul>
<li>Replace <code>my-new-app</code> with your preferred project name.</li>
<li>When prompted, choose a template (e.g., <code>blank</code>, <code>blank (TypeScript)</code>, or <code>tabs</code>).</li>
</ul>
<h2>2. Install Dependencies</h2>
Run the following command to install necessary dependencies:
<pre><code class="language-bash">npm i -D @monicon/metro @monicon/babel-plugin @monicon/loader
npx expo install @monicon/native react-native-svg
</code></pre>
<h2>3. Create Metro Config</h2>
Create a <code>metro.config.js</code> file:
<pre><code class="language-js">const { getDefaultConfig } = require(&quot;expo/metro-config&quot;);
const { withMonicon } = require(&quot;@monicon/metro&quot;);
const { loadLocalCollection } = require(&quot;@monicon/loader&quot;);

const config = getDefaultConfig(__dirname);

module.exports = withMonicon(config, {
 customCollections: {
 &quot;my-app&quot;: loadLocalCollection(&quot;assets/icons&quot;),
 },
});
</code></pre>
<h2>4. Create Babel Config</h2>
Create a <code>babel.config.js</code> file:
<pre><code class="language-js">module.exports = function (api) {
 api.cache(true);
 return {
 presets: [&quot;babel-preset-expo&quot;],
 plugins: [[&quot;@monicon/babel-plugin&quot;]],
 };
};
</code></pre>
<h2>5. Add Icons to the Project</h2>
Add your custom icons to the <code>assets/icons</code> folder.
Example Icons
<ul>
<li><a href="https://api.iconify.design/lucide:compass.svg" target="_blank" rel="noopener nofollow">compass.svg</a></li>
<li><a href="https://api.iconify.design/lucide:house.svg" target="_blank" rel="noopener nofollow">house.svg</a></li>
</ul>
<h2>6. Update <code>app/(tabs)/_layout.tsx</code></h2>
Modify the <code>_layout.tsx</code> file as follows:
<pre><code class="language-tsx">import { Monicon } from &quot;@monicon/native&quot;;

&lt;Tabs.Screen
 name=&quot;index&quot;
 options={{
 title: &quot;Home&quot;,
 tabBarIcon: ({ color }) =&gt; (
 &lt;Monicon size={28} name=&quot;my-app:house&quot; color={color} /&gt;
 ),
 }}
/&gt;
&lt;Tabs.Screen
 name=&quot;explore&quot;
 options={{
 title: &quot;Explore&quot;,
 tabBarIcon: ({ color }) =&gt; (
 &lt;Monicon size={28} name=&quot;my-app:compass&quot; color={color} /&gt;
 ),
 }}
/&gt;
</code></pre>
<h2>7. Start the Development Server</h2>
Run the following command to start your development server:
<pre><code class="language-bash">expo start
</code></pre>
<h2>Final</h2>
<img src="https://media.daily.dev/image/upload/s--QdCtMCeB--/f_auto/v1735959706/ugc/content_5e46df26-5dce-47fc-84f3-842d49b24413" alt="388282830-33429198-948c-45cb-b16c-55cd5d9803ec">

Its a public squad for all React Native Developers to post about their project, discuss about any problem or solutions. Let's build a React Native Developers Community

React Native Devs

Monicon simplifies managing custom icons in React Native and other popular frameworks such as Vue, Next.js, and Svelte. It offers over 200,000 icons from renowned libraries like Material Design and Font Awesome while supporting modern tools like Vite and Webpack. Monicon is free, open source, and designed for fast and efficient performance, making icon integration smooth and customizable.

How to add custom icons in React Native in 2025