# Background Icon

**NOTE**: we strongly encourage the use of the SVG tag over this background icon technique.

Background icons are placed in their own element. Whilst they can be placed in pseudo content (i.e. `::before` and `::after`) having its own element allows us the the ability to apply ARIA attributes to the icon.

All background icons will either be deemed critical or non-critical.

### Non-Critical Background Icons

An icon is deemed non-critical if it is purely presentational, or if the information can be found in nearby or adjacent text.

```markup
<p>
  <span class=”icon icon--warning”></span>
  <span>Warning: this item is about to expire</span>
</p>
```

The adjacent text clearly contains the word "Warning" and so the icon does not need to be discoverable for screen readers.

### Critical Background Icons

Critical icons are icons with no supplementary text.

```markup
<span class=”icon icon--hamburger” role="img" aria-label="Options"></span>
```

An aria-label is required to convey the meaning of the icon.

Critical icons are most common in buttons:

```markup
<button class=”hamburger” aria-label=”Options”>
  <span class=”icon icon--hamburger”></span>
</button>
```

Note that this time the label is added to the button instead of the icon element.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/techniques/icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.