Log Entry: June 7, 2026

Creating Consistent Icons with Codex and GPT

A practical field log from rebuilding the MoolaMochi icon system: removing white backgrounds, regenerating damaged assets, and using Codex plus GPT Image Gen 2 to keep every icon in the same visual family.

Bedrock Brains mascot leaping forward

Field Log: AI Workflows7 min read

App icons define the core visual style of a brand. For MoolaMochi, we needed clean finance icons with cream backgrounds, navy outlines, and red highlights. However, some generated assets had messy borders. We used Codex and GPT Image Gen 2 to clean them up and keep them consistent.

A MoolaMochi icon system board
Figure 1: The final icon pass combined regenerated assets, matte cleanup, and contact-sheet review inside the Codex app.

The Problem: The Halo Effect of Naive Cleanup

Using simple background removal tools on dark layout themes is a problem. They often leave messy white borders (halos) or accidentally delete internal shapes. We started by scanning our icon assets and writing a custom script that only targets outside edges, keeping the internal details intact.

A MoolaMochi logo shown on cream and navy surfaces
Figure 2: A navigation logo must survive on both dark and light dashboard backgrounds.

When Cleanup Fails, Regenerate

Sometimes background cleanup ruins outlines, like the paper edges of a receipt icon. When that happens, it is better to regenerate the asset. We prompted the image generator with design system constraints (thick navy outlines, rounded forms, and no backgrounds) and placed the asset on a flat chroma-key green screen. This allowed us to easily mask out the green background locally.

The regenerated transactions icon
Figure 3: Green-screen regeneration fixed the outlines while keeping the icon style consistent.

Consistency Comes From Auditing Sheets

To keep icons consistent across the app, place them all on a single dark-background contact sheet. This immediately highlights mismatched outline weights, weird shapes, or broken transparency edges.

A navy-background contact sheet of MoolaMochi core navigation icons
Figure 4: Contact sheets make outline inconsistencies and transparency halos visible immediately.

The Production Workflow

  • Inventory all active icon assets in your project directory first.
  • Clean up transparency using edge-connected masking to protect internal colors.
  • Use flat chroma-key green backgrounds for new generations to simplify local masking.
  • Place all assets on a unified dark contact sheet to audit outline weights.
  • Save files in optimized WebP formats and check the real app build using screenshots.

Generate like a designer, but ship like an engineer: prompt the asset, remove the matte, inspect the alpha, then verify the build.