# Ordio Loop Iconography (Outline SVG)

**Last Updated:** 2026-03-25

Ordio Loop partner surfaces use a **single registry** of semantic keys rendered as **Heroicons-style outline SVGs** (24×24 viewBox, `stroke-width="2"`, `currentColor`), aligned with the sidebar/KPI icons in [`v2/includes/affiliate-sidebar.php`](../../v2/includes/affiliate-sidebar.php). **Do not use Unicode emoji** in Loop UI, badge payloads consumed by the app, or partner marketing blocks that we control in-repo.

## Source files

| Purpose | Path |
|--------|------|
| PHP helper + path data | [`v2/includes/affiliate-loop-icons.php`](../../v2/includes/affiliate-loop-icons.php) |
| Browser helper (same keys) | [`v2/js/affiliate-loop-icons.js`](../../v2/js/affiliate-loop-icons.js) (load `affiliate-loop-icons.min.js`) |
| Badge metadata | [`v2/config/affiliate-badges.php`](../../v2/config/affiliate-badges.php) uses `icon_key` (not emoji) |
| API | [`v2/api/affiliate-levels.php`](../../v2/api/affiliate-levels.php) exposes `icon_key` on badge objects |
| Admin preview | [`/partner/icon-preview`](https://www.ordio.com/partner/icon-preview) (admins only; canonical path on prod) |

## PHP usage

```php
require_once __DIR__ . '/../includes/affiliate-loop-icons.php';
echo affiliate_loop_icon_svg('link', ['class' => 'affiliate-loop-icon', 'size' => 24]);
```

## JavaScript usage

After loading `affiliate-loop-icons.min.js`:

```javascript
var html = window.AffiliateLoopIcons.svg("chart", {
  className: "affiliate-loop-icon",
  size: 26,
});
```

Only pass **keys from the registry**. Never interpolate API text into SVG paths.

## Adding a new icon

1. Pick a new semantic `snake_case` key.
2. Add the same `paths` array to **both** `affiliate-loop-icons.php` and `affiliate-loop-icons.js`.
3. Run `npm run minify`.
4. Use the key from PHP or `AffiliateLoopIcons.svg` in JS.
5. Document the key in the admin preview page mapping table if it replaces prior emoji.

## Accessibility

- Decorative icons: default `aria-hidden="true"` (PHP/JS defaults).
- Informative standalone controls: set `aria_hidden` / `ariaHidden: false` and provide a visible label or `aria-label` on the control.

## Emoji inventory (removed)

Scanned paths: `v2/pages/partner*.php`, `v2/config/affiliate-badges.php`, inline dashboard/levels/leaderboard scripts.

| Location | Former | Now |
|----------|--------|-----|
| `affiliate-badges.php` | emoji `icon` | `icon_key` |
| `partner-dashboard.php` Schnellstart | 🔗🎉💰📊🏅 | `link`, `sparkles`, `currency`, `chart`, `medal` + API `icon_key` |
| `partner-levels.php` | 💡⭐✓🎉 | `lightbulb`, `level_stars_*`, `check_circle`, `sparkles` |
| `partner-leaderboard.php` | 🥇🥈🥉 | `rank_1` … `rank_3` |
| `partner-program.php` benefits | 💰📊🚀🎯🏆💼 | `currency`, `chart`, `rocket`, `target`, `podium`, `briefcase` |
| `partner-reset-password.php` success | ✓ | `check_circle` |

## Guard script (optional)

```bash
python3 v2/scripts/affiliate/scan-ordio-loop-emojis.py
```

Exits with code 1 if likely emoji remain in whitelisted Loop paths (heuristic). Run locally or in CI if desired.