App icon design SaaS

IconiseIcon design SaaS

A guided studio to explore visual directions, retain design decisions, and refine an app icon through to export.

Iconise5 / 8
Step 5

Choose a direction

Keep the decision that guides the next iteration.

Retained decisionOptionC

Overview

From an app idea to a finished icon

The problemCreating a consistent icon means defining an identity, comparing options, and tracking decisions. Without a structured process, iterations and design choices become scattered.

The solutionIconise connects briefs, visual directions, exploration and refinement across eight guided steps, followed by finalization. Decisions and iterations remain tied to each project.

User workflow

A usable brief

The brief records the app, its identity and visual preferences, and guides the following steps.

1 / 4: Define the project. Previous step / Next step

Technical architecture

The Next.js server verifies the session and workspace, then calls application services. Projects are persisted through Drizzle and PostgreSQL; Gemini and Stripe use separate adapters.

React interface

React / Next.js

Workflow screens and interactions
Requests

Next.js API

Next.js

Sessions, authorization and routes
Application services

Application services

TypeScript

Workflow, generation and credits
Data access

Persistence

PostgreSQL

Workspace-scoped projects, states and history via Drizzle
  • React interface: React / Next.js. Workflow screens and interactions Requests.
  • Next.js API: Next.js. Sessions, authorization and routes Application services.
  • Application services: TypeScript. Workflow, generation and credits Data access.
  • Persistence: PostgreSQL. Workspace-scoped projects, states and history via Drizzle

Technical challenges

01

Revisiting decisions safely

Constraint

Changing an earlier decision may invalidate work completed in later steps.

The solution

A transition model marks dependent steps as stale while preserving earlier iterations.

02

Keeping generation credits consistent

Constraint

A remote generation may fail, be retried, or produce competing updates.

The solution

Transactional reservations, idempotency keys, and conditional status transitions govern charges and refunds.

03

Preserving the appearance in SVG

Constraint

Vectorizing a raster master may distort edges, gradients, or file size.

The solution

Vector candidates are compared against the original, with an embedded-raster fallback if needed.

04

Isolating multi-account data

Constraint

A project identifier sent by the browser is not proof of ownership.

The solution

Reads and mutations cross a central authorization boundary before repository access.

Main technical stack

Next.jsTypeScriptPostgreSQLDrizzle ORMBetter AuthGoogle GeminiStripeSharp

Outcomes and learnings

Guided, versioned workflow

Eight creative steps followed by finalization, with decisions and iterations preserved for each project.

Configurable generation

A Gemini generation path with image validation and credit handling, enabled when configured.

Export formats for apps

Download the PNG master, a derived SVG that may embed the raster, and a multi-format favicon pack.

Previous projectAllaw
Next project

Suggst

Context-aware answers to meeting questions, directly from a native macOS app.