Modern web applications rarely need only arrows, menus, and generic interface icons.
A fintech dashboard needs payment and banking icons. A logistics platform needs waybills, packages, warehouses, and delivery trucks. An AI application needs model, prompt, and AI-related visual language. An African commerce platform may need icons that represent local payment methods such as Naira, USSD, POS, and bank transfers.
That is the idea behind Switch Icons.
Switch Icons is a modern, developer-focused React icon library designed around practical icons for real-world applications—not simply another collection of unrelated SVGs.
Why Switch Icons?
There are already plenty of excellent icon libraries available. But while building modern applications, there is often a gap between the generic icons most libraries provide and the domain-specific icons developers actually need.
Switch Icons is being built around that gap.
Instead of focusing exclusively on generic UI elements, the library combines familiar interface icons with categories such as:
Fintech and payment rails
Logistics
AI
Commerce
Technology
Security
Social
Business and CRM
Communication
Media
The goal is simple: make it easier for developers to find the right icon without having to create or hunt down an SVG every time they build a feature.
What's New in v0.2.0?
Switch Icons has now reached its first public npm release.
Version 0.2.0 includes 93 icons across 9 major categories, along with 14 solid variants for icons where a filled visual style makes more sense.
The current collection includes:
Navigation & UI
Essential icons for navigation, actions, and common interface patterns.
People & Communication
Icons for users, teams, messaging, communication, and related functionality.
Business & CRM
Icons designed for business applications and customer-management interfaces.
Fintech & Payment Rails
This is one of the areas that makes Switch Icons particularly different.
The library currently includes icons such as:
These are useful for applications dealing with payments, financial products, commerce, and African fintech workflows.
Logistics
For logistics and delivery applications, Switch Icons includes:
AI-focused interfaces are becoming increasingly common, so the library includes icons such as:
Security-related icons include:
Commerce
For storefronts and commerce applications:
Storefront
Barcode
Receipt
Technology
Technology and developer-focused applications can use icons such as:
API Connector
Webhook
Terminal
The collection also includes dedicated Media and Social icons covering common concepts such as images, video, music, hashtags, mentions, reposts, bookmarks, polls, and trending content.
Built for React and TypeScript
Switch Icons is built with React and TypeScript, with an API designed to remain simple and predictable.
Installation is straightforward:
npm install switch-icons
Or with pnpm:
pnpm add switch-icons
Or Yarn:
yarn add switch-icons
Then import only the icons you need:
import { ArrowRight, Naira, BankTransfer } from "switch-icons";
export function Example() {
return (
<div>
<ArrowRight size={24} />
<Naira size={24} />
<BankTransfer size={24} />
</div>
);
}
No complicated API. No custom configuration required.
Just import an icon and use it.
Designed to Be Customizable
Icons inherit the current text color by default through currentColor.
That means they work naturally with CSS and utility frameworks such as Tailwind CSS.
<ArrowRight
size={32}
strokeWidth={1.5}
className="text-blue-500"
/>
You can also specify a color directly:
<Naira
size={32}
color="#111827"
/>
Size, stroke width, and color can therefore be controlled without modifying the SVG itself.
Consistency Is the Point
One of the biggest problems with mixing icons from different sources is visual inconsistency.
You might have one icon with a heavy stroke, another with a thin stroke, different proportions, different viewBox dimensions, and completely different optical weight.
They technically work together—but they don't look like they belong to the same design system.
Switch Icons is designed to solve that problem.
Every icon follows a shared visual system:
The icons are also built through shared icon factories, including createIcon and createSolidIcon, so common behavior remains consistent across the collection.
Solid Variants
Not every icon works best as an outline.
Switch Icons v0.2.0 introduces 14 solid variants for icons where a filled treatment provides better visual communication.
The current solid variants include:
The goal isn't to create a solid version of every icon simply because it is possible.
Solid variants are being added where they genuinely improve the visual result.
Tree-Shakeable
Switch Icons is also designed with modern frontend tooling in mind.
The package uses named exports and sideEffects: false, allowing bundlers to remove icons that aren't being used.
That means importing a small number of icons doesn't need to mean shipping the entire icon collection to the browser.
For modern applications where bundle size matters, this is an important part of the architecture.
More Than Generic Icons
The philosophy behind Switch Icons can be summarized in one sentence:
Build the icons developers actually need.
A developer building a dashboard shouldn't have to create a custom SVG every time they need a bank transfer icon.
A logistics startup shouldn't have to search through multiple libraries for a waybill.
A fintech application shouldn't have to settle for a generic dollar icon when the interface is specifically dealing with Naira transactions.
An AI application shouldn't have to combine unrelated icons to communicate AI concepts.
These are small problems individually, but they appear repeatedly across projects.
Switch Icons is an attempt to solve them at the library level.
What's Next?
Version 0.2.0 is only the beginning.
The project is currently under active development, and the collection and API may continue to evolve before the first stable release.
The roadmap includes:
The project already has a separate interactive documentation and icon explorer site planned around these features.
Try Switch Icons
If you're building a React application and want a lightweight icon library with a stronger focus on practical, domain-specific icons, you can install Switch Icons today.
pnpm add switch-icons
Then:
import { Naira, Waybill, ShieldLock } from "switch-icons";
The project is open source and released under the MIT License.
GitHub: ihemehowell/switchicons
npm: switch-icons
Switch Icons is still growing, and the goal is not to become the library with the most icons.
The goal is to become the library that has the right icons when developers need them.