3D Icon Systems

One pipeline, three materials

All three sets were made the same way. A few hero icons were modelled in Cinema 4D to fix the material, the lighting and the depth of the glyph, and those renders became the target. The rest of each set was generated with AI (a Hugging Face diffusion pipeline) anchored to the references, then cleaned up, normalised and exported at 2048 or 4096 px, and handed over as a Figma library with one frame per icon for one-click export. What changed from set to set is the material, and the material is where the brand lives.

Cinema 4D — modelling the hero icons to lock the glass material, shader and lighting

Cinema 4D — refining angle and lighting on the same scene

The 3D references are the reason the AI output reads as one family rather than 66 separate generations

66 icons that feel like toys — a children’s e-commerce platform

A children’s online retailer commissioned a bespoke 3D icon system to replace the flat, emotionless stock iconography across their e-commerce platform. Two problems: category icons were functional but cold, and promotional icons (sale, returns, loyalty) looked identical to every other shop on the internet. The brief asked for 66 icons across eight functional categories — navigation, checkout, seasonal campaigns, baby care — working at thumbnail size (64–128 px on-screen) with no vector editing skill required from the marketing team. Client and platform name withheld at their request.

Two details run through the whole set. Googly eyes — bulging, semi-transparent, slightly asymmetric — give each object a personality without adding a face that competes with the object’s identity. A small fabric label tag hangs off each object with a one-word descriptor in lowercase (Cart, Dream, Roar). The tag doubles as an accessibility affordance and brand detail. Committing to this system early meant every new icon was a variation on a solved problem, not a new design decision.

Palette and surface language — warm-tinted shadows, no black fills, glossy inflated forms

Final assets were cropped to 2048 × 2048 px on a neutral background and delivered as PNG. Total timeline: approximately three weeks end-to-end. Locking the look in C4D before AI scaled it is what kept a 66-icon set this size manageable on a two-tool pipeline.

All 66 icons are organised into eight sections in the Figma delivery file, mapping directly onto the platform’s navigation hierarchy: Navigation & UI (7), Shopping & Delivery (13), Baby & Newborn (11), Toys & Play (10), Education & Creativity (8), Clothing & Accessories (7), Health & Care (4), Seasonal & Celebrations (6). Each frame is named using the convention Icon — [Name] for easy asset export.

21 glass icons and their motion — a KBC banking concept

Banking interfaces have a warmth problem and a trust problem at once. Flat, monochrome icons are clear but cold; they make a financial product feel like a utility rather than a service someone enjoys using. This self-initiated concept answers a single brief: give a banking app a warmer, more premium visual voice without sacrificing clarity. The icons had to read instantly at small sizes (a 24–48 px tab bar or list row), feel consistent across all 21 assets so the app never looks assembled from stock, stay unmistakably KBC — the brand blue, the logo, the card and coin motifs — and be reusable by a marketing team with no 3D skills.

A note on scope: this is a brand exploration, not a commissioned project. KBC did not brief or approve it; I used the bank’s public brand world as the constraint precisely because a real, recognisable identity is the hardest test of an icon language.

Three traits hold the family together. A translucent blue glass skin — a navy-to-cyan palette in a frosted, refractive material whose rim catches light and gives each object real physical depth. A soft white glyph paired with solid matte-navy bodies, so the functional symbol stays legible against the glassy highlights. And KBC brand anchors — the logo, branded bank cards and small blue coins recur throughout, tying every icon back to the bank rather than reading as a generic 3D pack.

Analytics & Growth — 5 icons; the glass skin and recurring KBC card / coin motifs hold the family together

A subset of the icons was brought to life in After Effects as short, looping micro-animations for key moments in the app. Card toss is the hero motion — KBC bank cards flip up and sail along a smooth arc before settling back into place (Card Protection, Card Insights, Digital Wallet, Payment Terminal, Recurring Payments). Coins toss and tumble along the same arc, then settle (Savings Account, Currency Exchange, Investments). The protection shield sweeps in and catches the light, signalling safety (Data Security, Family Shield, Insurance Protection).

Communication & Collaboration — 3 icons

Global & Operations — 3 icons

25 holographic icons — a social messaging concept

This is a self-initiated concept: a 25-icon system designed as the visual language for a next-generation social messaging app, covering the full surface of a modern chat product — messaging, calls, presence, reactions, media capture and file actions. The aesthetic — iridescent chrome, glass, candy-neon gradients — points squarely at a young, expressive, social-first audience. The leading direction is “Aura”, an expressive chat app for Gen-Z where self-expression is the core loop: holographic themes, reactions, voice notes, disappearing media and AI-assisted replies, with the icon set itself acting as the brand from the app-store tile to the in-chat toolbar.

The two icon shapes encode two roles: round discs are in-app UI actions (toolbar, tabs, inline buttons); square tiles are app / feature launchers (camera, video, voice, gallery). That split is the reason the set reads as a real product, not a sticker pack

Three traits do the heavy lifting on every icon. A holographic gradient skin — a sweeping pink → magenta → violet → blue iridescence, like an oil-slick or CD surface, where no two angles read the same colour. An embossed white glyph — a soft, matte, slightly grainy white form pressed into the surface, keeping legibility high against the busy gradient. And a glass rim and depth — a translucent, refractive edge that catches light and gives each icon real physical presence.

Messaging — 5 round discs; the iridescent skin reads as one family across separately-generated renders

The 25 icons are organised into five sections, split first by role (UI action vs feature launcher = round vs square) then by task group: Messaging (5, round), Calls & Presence (5, round), Actions & Reactions (5, round), Media & Capture (4, square) and Compose & Manage (6, square). A reader can see at a glance which icons belong on a toolbar and which belong on a home grid.

Calls & Presence — 5 round discs

Media & Capture — 4 square tiles

Compose & Manage — 6 square tiles; the square carrier marks feature launchers apart from round UI actions

Neither all by hand nor all by AI

Two clean options sat on the table and I took neither. Modelling all 66 icons in Cinema 4D would have held the look and missed the deadline. Generating all 66 with AI would have hit the deadline and lost the family resemblance — 66 separate generations rather than one set. So the look was locked in C4D first, then scaled out with AI against those references.

Then the harder call: anchoring the set to KBC’s real public brand world instead of inventing a neutral fictional bank. A made-up identity would have been easier to please. It would also have proved nothing. A real, recognisable brand is the hardest test of an icon language, and the logo, the branded cards and the small blue coins all had to recur without the set sliding into a generic 3D pack.

With a holographic style the tempting workflow is to generate freely and curate afterwards. I ruled it out early. Holographic surfaces go chaotic fast: lit differently, 25 icons read as 25 unrelated objects. Material and lighting were locked in 3D first, then a uniform +40% saturation pass went over the top at the end, so the neon stays punchy without the family falling apart.

The taxonomy was a decision, not a default. The set splits first by role and only then by task: UI actions are round, feature launchers are square. Sorting by topic alone would have produced a tidy list and a shape language that tells the user nothing about what a control actually does.

Three brands, one way of working

The commissioned set shipped production-ready to the client, covering navigation, checkout, trust signals, product categories and seasonal campaigns. The two concepts are complete systems with a Figma delivery file each, but nobody commissioned them: they show the same pipeline carrying a bank and a chat app, and they have not been tested in a live product.

The naming convention Icon — [Name] is Figma-export-friendly and alphabetically sortable, and should be enforced if the set is extended by a different designer. Any new icon brief should start by identifying which of the eight sections it belongs to — if it doesn’t fit, that’s a signal to either extend the taxonomy or reconsider whether the icon is needed at all.

The material carries the brand and the glyph carries the meaning. Locking both in 3D before AI scales them is what turns a batch of generations into a set