A Guide to Using Icons in the App and Adding New Icons

Keeping icons consistent across the app is hard once the set grows. MiruIcons centralizes them.

MiruIcons is our shared icon set. This guide covers using it and adding new icons.

MiruIcons is our collection of reusable icons — a mix of third-party and custom ones — kept in one place so the app’s icons stay consistent.

UI Consistency: MiruIcons enforces a unified style, preventing the use of disparate icons across our app.
Reuse and Efficiency: Developers can easily import and reuse icons, reducing the need to create icons from scratch.
Scalability: You can add new icons as the app grows.

To get started with MiruIcons, we’ll need to import the icons into components. The following examples demonstrate how to do this:

import { CaretCircleLeftIcon } from "miruIcons";
import { SearchIcon } from "miruIcons";
import { XIcon } from "miruIcons";

import { PencilIcon, DeleteIcon } from "miruIcons";
import { SearchIcon, FilterIcon } from "miruIcons";

If an icon isn’t in the collection, add it with these steps:

Step 1: Prepare the Icon File Before adding a new icon, we’ll need the icon’s SVG file or import it from @phosphor-icons/react package or we can even add gif file. Basically we can create our own or obtain one that suits our needs. Ensure the file adheres to any format or dimension requirements.
Step 2: Add the Icon to the MiruIcons Folder Next, place the newly acquired icon file in the appropriate MiruIcons folder. It’s essential to maintain a structured hierarchy for icons to keep things organized. Export the newly added icon from the index.tsx file of MiruIcons.
Step 3: Import and Use the New Icon With the icon file in place, we can import and use it just like any other MiruIcon:

import { NewCustomIcon } from "miruIcons";

The icon is now available anywhere in the app.

Miru Icons