Advanced

Advanced React Icons Usage: Context, Hooks & Dynamic Rendering

12 min read

Master advanced techniques for React Icons including IconContext, dynamic rendering, and integration with React hooks for powerful icon systems.

When working on modern React applications, visual elements like icons are not just aesthetic—they enhance usability, improve accessibility, and create a cohesive UI experience. Among many options, the react-icons library has emerged as a powerful, flexible, and lightweight tool for importing and using popular icon sets.

But while most developers stop at simple imports, React Icons offers more—and in this post, we'll dive into advanced techniques that help you render icons dynamically, use React Context for global styling, and integrate hooks for conditional rendering. Whether you're building a design system or just want cleaner code, these techniques can supercharge your icon implementation.

Table of Contents

  1. Quick Introduction to React Icons
  2. The Power of IconContext
  3. Dynamic Icon Rendering with Props
  4. Conditional Icons with React Hooks
  5. Reusable Icon Wrapper Components
  6. Theming and Global Icon Styling
  7. Performance Considerations
  8. Conclusion

Quick Introduction to React Icons

React Icons is a library that consolidates icons from multiple popular sets including Font Awesome, Material Design Icons, Feather, HeroIcons, and more. The main benefit is the modular ES6 imports, which means you only include the icons you actually use—keeping your bundle size small.

npm install react-icons

Basic usage:

import { FaBeer } from 'react-icons/fa';
function App() {
return <h3>Let's have a <FaBeer /> together!</h3>;
}

But instead of just statically adding icons, let's see how we can level up our usage.

The Power of IconContext

React Icons exposes a powerful utility called IconContext.Provider, which allows you to set global icon props (like size, color, className) without repeating them in every component.

Example: Global Icon Styling

import { IconContext } from 'react-icons';
import { FaCoffee, FaBeer } from 'react-icons/fa';
export default function App() {
return (
<IconContext.Provider value={{ color: 'purple', size: '2em' }}>
<div>
<FaCoffee />
<FaBeer />
</div>
</IconContext.Provider>
);
}

Why use IconContext?

  • Keeps your code DRY.
  • Easily adapts to themes (light/dark modes).
  • Centralizes icon styling in large-scale apps.

You can even nest contexts if you need different styles for different sections.

Dynamic Icon Rendering with Props

What if you want to render an icon based on user input, JSON data, or a component prop? Instead of hardcoding the import, you can create a mapping object of your icons and dynamically select them.

Example: Dynamic Icon Renderer

import { FaBeer, FaCoffee, FaApple } from 'react-icons/fa';
const iconMap = {
beer: FaBeer,
coffee: FaCoffee,
apple: FaApple,
}
function DynamicIcon({ name }) {
const IconComponent = iconMap[name];
if (!IconComponent) return <span>❓</span>;
return <IconComponent />;
}

Usage:

<DynamicIcon name="coffee" />
<DynamicIcon name="beer" />

You can even combine this with data-driven rendering, such as:

const features = [
{ name: 'brew', icon: 'beer', description: 'Craft your drink' },
{ name: 'java', icon: 'coffee', description: 'Morning booster' },
];
features.map((feature) => (
<div key={feature.name}>
<DynamicIcon name={feature.icon} />
<p>{feature.description}</p>
</div>
));

Conditional Icons with React Hooks

React Hooks allow for smart UI rendering. You can toggle icons based on user interaction or application state.

Example: Toggle Icon with useState

import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { useState } from 'react';
function FavoriteButton() {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? <FaHeart color="red" /> : <FaRegHeart />}
</button>
);
}

This is a great pattern for interactive UIs like likes, bookmarks, or read/unread indicators.

Example: Loading States

import { FaSpinner, FaCheckCircle } from 'react-icons/fa';
function SubmitButton({ isSubmitting }) {
return (
<button disabled={isSubmitting}>
{isSubmitting ? <FaSpinner className="spin" /> : <FaCheckCircle />}
Submit
</button>
);
}

You can add spinning animation with a CSS class:

.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Reusable Icon Wrapper Components

To keep your icon system flexible, you can build icon wrappers that abstract away logic, styling, and even error handling.

Example: IconWrapper

function IconWrapper({ icon: Icon, color = 'black', size = '1.5em' }) {
if (!Icon) return null;
return <Icon color={color} size={size} />;
}

Usage:

<IconWrapper icon={FaBeer} color="goldenrod" />

This pattern is extremely useful in design systems or component libraries, where you need consistent rendering and customizable behavior.

Theming and Global Icon Styling

By combining IconContext.Provider with a theme toggle or CSS variables, you can easily integrate icons into dark/light themes.

Example: Themed IconContext

import { useContext } from 'react';
import { IconContext } from 'react-icons';
import { ThemeContext } from './ThemeContext';
function ThemedIcons({ children }) {
const { theme } = useContext(ThemeContext);
const iconColor = theme === 'dark' ? '#fff' : '#000';
return (
<IconContext.Provider value={{ color: iconColor, size: '1.5em' }}>
{children}
</IconContext.Provider>
);
}

Wrap this around your app or component section, and icons will automatically follow the current theme.

Performance Considerations

While react-icons is lightweight by design, there are a few performance tips to keep in mind:

  • Tree-shaking: Use named imports to ensure only needed icons are bundled.
import { FaBeer } from 'react-icons/fa'; // ✅
  • Avoid lazy loading small icons individually unless you're dealing with large icon sets or custom icons.
  • Memoization: If rendering lots of icons, consider memoizing icon components or maps to avoid unnecessary re-renders.

Conclusion

React Icons goes far beyond basic usage. With advanced techniques like IconContext, dynamic rendering, and React hooks, you can create elegant, maintainable, and scalable icon systems that fit right into any modern React architecture.

Here's what you should take away:

  • Use IconContext.Provider for consistent, global icon styling.
  • Create dynamic icon mappings for data-driven UIs.
  • Combine icons with hooks for toggles and conditional states.
  • Build reusable icon wrappers for clean, maintainable code.
  • Incorporate theming and performance best practices.

By mastering these techniques, you not only make your UI more polished but also elevate your front-end development game. Icons are small—but in modern apps, they have a big impact.