.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Icons

Petrel uses a managed icon library. Icons must be selected from the library and used according to these naming, sizing, and usage rules.
## Core principles

- Use icons from the approved Petrel icon library. Do not create custom icons without approval from the SNTC UX team.
- Icons must always be accompanied by a text label or accessible name — icons alone do not provide sufficient context.
- Icon colour must meet the 3:1 non-text contrast requirement (WCAG 1.4.11).
- Provide icons in vector format (SVG or WPF Path/DrawingImage) to support DPI scaling without blurring.


## Icon naming conventions

Petrel icon identifiers follow the pattern: `[domain].[object].[action]`

Examples:

- `well.vertical.add` — Add a vertical well
- `seismic.line.delete` — Delete a seismic line
- `fault.surface.edit` — Edit a fault surface
- `project.save` — Save the project


Prototype naming convention. Confirm the full naming taxonomy with the Petrel development team.
## Icon sizes

Size
Use
16×16px
Toolbar icons, context menu icons, inline status icons
24×24px
Ribbon large-format icons (small variant)
32×32px
Ribbon large-format icons (large variant)
64×64px
Dialog topic icons, splash screen
## Do and Don't

DO
Use the icon identifier to look up the correct icon in the Petrel icon library before requesting a new icon. Many concepts are already represented — unnecessary new icons increase the cognitive load for users who must learn what each icon means.
DON'T
Don't create icon-only buttons without a tooltip and accessible name. Icons are ambiguous without context. A "star" icon in the Petrel toolbar has been misidentified as "favourite", "bookmark", "template", and "quality flag" by different users in research sessions.
## Accessibility considerations

Every icon used as an interactive control (in a button, toolbar, or menu) must have an accessible name set via `AutomationProperties.Name`. See [Labels and accessible names](/solutions/ocean-petrel/petrel-guideline/accessibility/labels-and-names).

Decorative icons (used purely for visual reinforcement next to a text label) should be hidden from the accessibility tree using `AutomationProperties.AccessibilityView = Raw`.

### Related pages

Ribbon
— Icon usage in the Ribbon
Labels and accessible names
— Accessible names for icon controls
Scaling and DPI
— Multi-resolution icon requirements