# Copa icons CDN catalog

Last validated: 2026-08-06

This catalog transcribes the icon families, colors, and filenames visible in the supplied Copa's Design System 2.0 / Website Patterns references. The screenshots are the design source; the listed production URLs were checked directly against the Copa CDN.

## URL construction

| Family | URL pattern |
| --- | --- |
| Informative | `https://www.copaair.com/webassets/icons/informative/{icon_name}.svg` |
| Alerts | `https://www.copaair.com/webassets/icons/alerts/{color}/{icon_name}.svg` |
| Regular | `https://www.copaair.com/webassets/icons/regular/{color}/{icon_name}.svg` |

Use category, color, and filename exactly as documented. Do not derive a new color slug, translate the filename, recolor an asset, or move an icon between families because it looks similar.

## Informative

The informative family does not include a color segment in the supplied URL pattern.

`basic`, `classic_saver`, `ec_full_standard`, `promo_saver`, `biz_full_standard`, `chevron_light`

Example:

```text
https://www.copaair.com/webassets/icons/informative/basic.svg
```

## Alerts

Base: `https://www.copaair.com/webassets/icons/alerts/{color}/{icon_name}.svg`

| Color | Confirmed filenames |
| --- | --- |
| `700` | `warning_f`, `warning_o`, `info_f`, `info_o`; the supplied URL example also confirms `error_f` |
| `error` | `error_f`, `error_o`, `warning_f`, `warning_o` |
| `warning` | `info_f`, `info_o`, `warning_f`, `warning_o` |
| `success` | `check_f`, `check_o`, `check` |
| `white` | `warning_f`, `warning_o`, `info_f`, `info_o`, `error_f`, `error_o`, `check_f`, `check_o`, `calendar_f`, `calendar_o`, `time_f`, `time_o` |
| `primary-main` | `warning_f`, `warning_o`, `info_f`, `info_o` |
| `primary-ultradark` | `info_f`, `info_o` |

Examples:

```text
https://www.copaair.com/webassets/icons/alerts/700/error_f.svg
https://www.copaair.com/webassets/icons/alerts/success/check_f.svg
https://www.copaair.com/webassets/icons/alerts/primary-main/info_f.svg
```

The first example is the explicit URL supplied in the reference and was verified independently. The screenshot's visible `700` set labels `warning_f`, `warning_o`, `info_f`, and `info_o`.

## Regular

Base: `https://www.copaair.com/webassets/icons/regular/{color}/{icon_name}.svg`

| Color | Confirmed filenames |
| --- | --- |
| `primary-main` | `traveler_o`, `traveler_f`, `stylish_seat`, `arrow_r`, `map_location_f`, `check`, `cross`, `chevron_r`, `savings`, `edit_o`, `connection` |
| `primary-light` | `check_circle_icon`, `check`, `help_f`, `help_o`, `chevron_r` |
| `error` | `cancel_filled`, `trash_o`, `cross` |
| `dark-orange` | `error_filled`, `currency` |
| `white` | `traveler_o`, `traveler_f`, `chevron_r`, `chevron_u`, `chevron_d`, `chevron_l`, `flight_f`, `flight_r`, `flight_l`, `flight_u`, `flight_d`, `arrow_u`, `arrow_d` |
| `700` | `chevron_r`, `check`, `dot`, `plus` |
| `500` | `cross` |

Example:

```text
https://www.copaair.com/webassets/icons/regular/primary-main/chevron_r.svg
```

## Selection rules

- Use Alerts only for semantic feedback, warnings, errors, success, dates, or time where the documented icon matches the message.
- Use Regular for interface actions, navigation, people, travel, location, and other functional concepts.
- Use Informative for the fare or product-information concepts represented by that grouped family.
- Filled (`_f`) and outline (`_o`) are official variants. Choose the variant required by the component; do not synthesize one from the other.
- A control that shows only an icon needs a translated accessible name. An icon next to equivalent visible text is decorative for assistive technology.
- Do not use color as the only status signal. Pair the icon with explicit text.
- Treat the CDN URL as an image resource. During validation, all 78 visible combinations plus the explicit `alerts/700/error_f` example returned HTTP `200`; four `.svg` URLs reported `image/png` (`alerts/700/error_f`, `alerts/700/info_o`, `regular/primary-main/check`, and `regular/primary-main/savings`). Do not depend on parsing or inlining every response as SVG.

## Preserved references

- [Informative naming](./copa-icons-informative-naming.png)
- [Alerts catalog](./copa-icons-alerts-cdn-catalog.png)
- [Regular catalog](./copa-icons-regular-cdn-catalog.png)
- [Official section title pattern](./copa-section-title-pattern-icons.png)
- [Numbered landing capabilities — do not use](./landing-numbered-capabilities-do-not-use.png)
- [Detached title lash — do not use](./landing-detached-title-lash-do-not-use.png)
- [Confirmed status pill — do not use](./landing-status-confirmed-do-not-use.png)
- [Working-convention status pill — do not use](./landing-status-working-do-not-use.png)
- [Pending-validation status pill — do not use](./landing-status-pending-do-not-use.png)