---
title: App Icons - real app icons at high res + Imperium styling + logo-on-prop generation
tags:
  - "brand"
  - "assets"
type: skill
status: active
created: 2026-07-29
description: "Get REAL, current, high-resolution app icons (Figma, VS Code, Gmail, Slack, Teams, LinkedIn, any client logo) for marketing material, dock/integration visualisations, and client decks - then optionally restyle them (glassmorphic, Imperium porcelain) or bake any logo INTO a 3D prop with correct perspective via reference-image generation. Use when Alex asks for app icons, tool logos, integration graphics, dock mockups, white-label visualisations of a client's logo, or complains that generated icons look fake/outdated. NEVER let an image model draw a third-party logo from imagination - always feed the real asset as reference."
name: app-icons
---

> **PORTABILITY NOTE.** Published from Imperium's internal operating system. Paths starting
> with `~/.claude/`, `/Users/alex/...`, `<repo-root>/`, or `scripts/`, plus Drive/Telegram
> distribution steps and CLI wrappers, are the author's machine conveniences — substitute your
> own tooling. The prompts, model choices, parameters, and QA gates are the portable substance.


# App Icons - the real-icon pipeline

Built 2026-07-29 after Alex rejected AI-drawn placeholder icons in `components-lab/app-dock`
and `components-lab/integrations-catalog`. Rule: **third-party logos are never drawn by a
model or by hand - they are sourced from an authoritative asset, then styled.**

## Tooling (already built): `tools/app-icons/`

1. **Installed apps → exact macOS icons** (best fidelity, always current):
   `./extract-installed.sh "/Applications/Figma.app" raw/figma.png`
   Pulls the .icns at its max representation (256-1024px, transparent squircle with
   ~10% margin). Finder lives at `/System/Library/CoreServices/Finder.app`.
2. **Web-app brands → official SVG on an iOS-style squircle tile**:
   `manifest.json` (slug, Wikimedia Commons source, bg, pad, invert/darken/fullBleed)
   → `./make-tiles.sh` → `tiles/<slug>.png` (1024px, alpha). 19 brands already cached
   (Gmail, Google Calendar/Drive/Docs/G, Outlook 2025, Teams 2025, M365, Slack, LinkedIn,
   Instagram, Facebook, X, Notion, OpenAI-2025, Zapier, Salesforce, HubSpot, Stripe).
3. **Client logos (white-label)**: drop their SVG/PNG into `manifest.json` with a local
   `source` path or just place a 1024px PNG in `tiles/` - same downstream pipeline.

### Sourcing rules
- Wikimedia Commons hosts current official marks; **watch redirects** - a request for
  "(2018–present)" resolving to "(2018–2024)" means a NEWER icon exists (that is how
  Outlook 2025 / Teams 2025 / OpenAI 2025 were caught). Search `intitle:` on Commons.
- Verify every tile visually on a contact sheet before compositing (the ChatGPT slug
  initially fetched the wrong Commons file - a solid blob).
- Raw .icns exports need `width:129%` overscan in a tile slot (margin compensation);
  Figma's electron.icns needs ~146%.

## Where they're used (recipes)

- **Dock visualisation** (`components-lab/app-dock/imperium.html`): real icons in a glass
  dock bar, Imperium tile sharp + active dot, others `blur(5px) brightness(.78)`. For a
  client white-label: swap the mark-tile for their icon tile.
- **Integrations crowd** (`components-lab/integrations-catalog/imperium.html`): rows of
  real tiles, front row on ONE baseline, receding rows smaller/dimmer/blurred, mirrored
  reflections (`scaleY(-1)` + fade mask), hero tile front-center.

## Styling treatments (proven 2026-07-29, `components-lab/icon-styles/`)

- **Glassmorphic**: GPT Image 2 edit (`~/.claude/skills/mockup-studio/scripts/gpt-finish.mjs
  --image tiles/slack.png --size 1024x1024 --prompt "frosted translucent glass slab, logo
  colors preserved exactly..."`). Keeps the logo faithful; result: slack-glass.png.
- **Imperium porcelain**: same tool, prompt = bone porcelain tile #F4F1EA + logo inlaid in
  racing-green enamel #11462C + mint #4CB782 rim light + dark green ground. Result:
  slack-imperium.png. Always say "keep the logo shape EXACTLY faithful - no redesign".

## Logo-on-prop generation (the perspective fix)

Never overlay a flat SVG on a 3D prop with CSS transforms - it reads pasted-on (Alex,
2026-07-29). Instead bake it in:

1. Render the logo SVG to a clean 1024px PNG on white (headless Chrome).
2. `media_upload` (presigned PUT + `media_confirm`) BOTH the existing prop cutout AND the
   logo PNG to Higgsfield.
3. `generate_image` model `nano_banana_pro` (logo embossing is a hard case per the AGENTS.md §3 routing table) with BOTH as `medias[{role:"image"}]`:
   "reproduce the prop from image 1 EXACTLY ... with the logo from image 2
   embossed/engraved on the face, foreshortened to follow its exact tilt and perspective,
   physically machined, not printed". Count 2, pick the winner.
4. `remove_background` on the winning job_id → alpha cutout → swap into the component.

Proven on: launch-cover metal slab (green enamel engrave), glow-cards coin/chip/tiles
(paper-white minted emblem, centered). GPT Image 2 edit is the fallback when Higgsfield
is unavailable (single-image edit; composite logo+prop into one input image first).

**Logo scale (Alex-calibrated 2026-07-29):** prompt the emblem at ~45% of the face width,
not 55 - Alex picked the smaller-emblem candidate on the metal slab ("a little bit
smaller"). Always generate 2 candidates and default to the finer/smaller emblem unless
told otherwise.

**Delivery trap:** transparent-PNG icons shown on a gallery page must NOT get a CSS
background fill (a #123 fill read as "blue corners" to Alex), and rebuilt files under
identical URLs serve STALE from Chrome cache - cache-bust every asset URL with ?v=mtime.

## Hard rules

- Real marks only, current versions only (re-verify icons >6 months old - brands rebrand).
- Imperium brand context → load `assets/imperium/brand-v5/` first (rule 21).
- Trademark note: these are for Imperium's own marketing/deck use depicting integrations -
  standard nominative use. Don't distort third-party marks' colors when shown AS the brand
  (glassmorphic keeps colors); recolor only in clearly stylised Imperium contexts.

## Related
- `tools/app-icons/` (scripts + cache) · `.claude/skills/imperium-brand.md` ·
  `.claude/skills/imperium-ui-replicate.md` · `~/.claude/skills/mockup-studio/`
