Building a Custom Emoji Picker with Localized Keywords for Banking Mobile Apps using Swift

Have you ever struggled to find the perfect emoji? In banking app that I currently worked on, we wanted to make this easier for our users while keeping everything secure and on-brand. The standard iOS emoji keyboard just wasn't cutting it - we needed something tailored for banking that would work great for our Indonesian users.

The Solution: A Homegrown Emoji Picker

Instead of settling for the default option, we built our own emoji picker from scratch. Here's what makes it special:

1. Speaks Your Language: Works in both English and Bahasa Indonesia
2. Understands Local Culture: Knows terms like "ngakak" (that feeling when something's really funny)
3. Banking-Friendly: Highlights emojis useful for money conversations
4. Feels Like Brimo: Matches our app's look and feel perfectly.

The Foundation: Emoji Data

I started by building a massive dictionary that connects each emoji with words people might use to search for it. This wasn't just a simple copy of standard emoji names - I spent days testing and refining to make sure it worked for real users.

{
"💰": ["money", "cash", "savings", "uang", "tabungan"],
"🍔": ["burger", "food", "junk food", "makanan", "fast food"],
"😂": ["laugh", "funny", "happy", "tertawa", "lucu"]
...
}

I made sure to include:

• Everyday English terms
• Common Indonesian translations
• Banking-specific terms
• Local slang where appropriate

To load this data, I created the EmojiKeywordLoader class:

his gives me a way to look up keywords for any emoji, which is crucial for the search functionality.

Organizing Emojis by Category

I organized emojis into several categories:

Each category has its own icon that changes appearance when selected:

Building the UI Components

Category Selection Bar

At the top, users can switch between categories. I created a custom cell for this:

Emoji Display Grid

For displaying the actual emojis, I used a simple cell with just a label:

The Main Emoji Picker View

The EmojiPickerViewController brings everything together. Here's how it works:

Initial Setup

When the view loads, I:

1. Set up the UI appearance (rounded corners, colors)
2. Configure the search bar
3. Load the recent emojis
4. Set up the initial category (recent emojis)

Handling Emoji Categories

The tricky part was loading emojis by their Unicode ranges. For example, smileys are in the range 0x1F600-0x1F64F. Here's how I handle it:

Flag Emoji Categories: I just Knew 😂

when building this I just knew that flags are special because they're combinations of two regional indicator characters (like 🇮🇩 = "I" + "D"):

Search Functionality

When users type in the search bar, I:

1. Wait a brief moment (300ms) before searching to avoid searching on every keystroke
2. Check both the predefined keywords and the Unicode names of emojis
3. Filter the emoji list accordingly

Recent Emojis

I store recently used emojis in UserDefaults so they persist between app launches:

When an emoji is selected, I add it to the recent list (limiting to 30 / or you can define it yourself):

Handling User Interaction

I made sure to handle taps properly:

• Taps on emojis select them and add to recents
• Taps on category icons switch categories
• Taps outside the picker dismiss it

Final Thoughts: The Brimo Emoji Picker in Context

This emoji picker is just one of many features we built for Brimo, Bank BRI's super app designed to make banking more engaging and user-friendly. While it might seem like a small component, emojis play a big role in modern digital communication—whether in chat, transaction notes, or feedback systems.

Why Customization Matters

A stock emoji keyboard wouldn’t cut it for Brimo because:

1. Brand Alignment – We needed icons that matched BRI’s visual identity (colors, rounded edges, and a friendly feel).
2. Localization – The keyword search supports both English and Indonesian ("senang", "gembira"), crucial for BRI’s user base.
3. Performance – A pre-loaded, optimized emoji set ensures smooth scrolling, unlike some OS keyboards that lag.
4. User Habits – The "recent emojis" feature learns from user behavior, making frequent picks quicker to access.

Fun Challenges & Exploration

Building this was surprisingly fun because:

• Unicode Deep Dive – Discovering that flags are actually two-letter combinations (🇮🇩 = "I" + "D") was a cool hack.
• Search Optimization – Balancing speed and accuracy for 3,000+ emojis led to creative solutions like keyword mapping.
• Micro-Interactions – Tiny details, like the category icons changing color when selected, make the experience delightful.

Want to See More?

If you're curious about the full implementation (or how we integrated this into Brimo’s chat and transaction systems), feel free to reach out via email (or check out BRI’s engineering blog for deeper dives).

After all, who knew banking apps could make emojis this fun? 😉