<!-- source-hash: fe7a0a95673575f637ece7b20bebd5c4 -->
Renders a unified icon across all app surfaces (announcement bar, chat quick actions, AI-agent identity) using a consistent three-step resolution strategy.

## Key Components

### `EntityIconValue` (interface)
Shared icon descriptor used throughout the app. Accepts one of:
- `name` — library glyph name resolved via `resolveIcon`
- `url` — uploaded image URL (takes priority over `name`)
- `props` — additional props spread onto the resolved glyph (e.g. `{ color }`)

### `EntityIcon` (component)
The single icon-rendering path for the whole app. Resolution order:
1. `url` → renders an `<img>` tag with `objectFit: contain`
2. `name` ∈ `{fae, mingo}` → renders the packaged `AgentMark` brand component
3. `name` → resolves a library glyph via `resolveIcon` and spreads `props`

Falls back to an empty glyph when no `icon` is provided.

**Props:**

| Prop | Type | Default | Description |
|---|---|---|---|
| `icon` | `EntityIconValue \| null` | — | Icon descriptor |
| `size` | `number` | `20` | Pixel size (width/height) |
| `className` | `string` | — | Tailwind/CSS classes; enables responsive sizing |

> **Sizing note:** When `className` is provided, sizing is controlled entirely by CSS (e.g. `w-6 md:w-8`). The `size` prop is only applied as an inline style when no `className` is given, preventing class overrides.

## Usage Example

```typescript
import { EntityIcon, type EntityIconValue } from './icon-display'

// Uploaded image
const imageIcon: EntityIconValue = { url: 'https://cdn.example.com/logo.png' }

// Brand agent mark
const agentIcon: EntityIconValue = { name: 'mingo' }

// Library glyph with custom color
const glyphIcon: EntityIconValue = { name: 'shield', props: { color: '#FF5733' } }

// Fixed size
<EntityIcon icon={glyphIcon} size={24} />

// Responsive via Tailwind
<EntityIcon icon={agentIcon} className="w-6 md:w-8" />
```

## Source

[`icon-display.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/icon-display.tsx)