# Icons
Lets readers browse a set of icons by name and copy the SVG of each one.
### Known issues
None known.
### Copy the markup
Icon grid markup
```html
```
The same icons as a sprite: paste it once in the page, then draw each one with ``. The sprite works only in the same document (`href="#id"`); a `` that points at a file on another origin, a CDN included, is blocked by browsers.
Icon sprite markup
```html
Menu
```
Two icons point to the end of the line: `chevron-end` and `arrow-end`, marked with `data-luz-flip`. In right-to-left text, LUZ mirrors anything with that attribute using the rule below, in core's utilities layer, so you write nothing.
Add the attribute to an icon of your own that points to the end of the line.
Right-to-left rule, shipped in luz.utilities
```css
:where([data-luz-flip]):dir(rtl) {
transform: scaleX(-1);
}
```
### Variants and options
There are no modifiers. The grid fits as many columns of at least 100 px as the width allows.
- `.luz-icon-grid`: The list: a grid with no bullets
- `.luz-icon-item`: One bordered cell: icon, name, copy button
- `.luz-icon-display`: A 48 × 48 px box that centres the icon, in the secondary text colour
- `.luz-icon-name`: The name under the icon
### How it works
A `` of icons, styled by `components/icon-grid.css`. The copy buttons are [copy buttons](https://nandovejer.github.io/luz/docs/components/copy-button/), wired by `clipboard.js`.
- Each button carries the icon's SVG, escaped, in `data-copy`. On this page a script fills it from the icon beside the button, so the page does not carry every icon twice.
- The icons are LUZ's own, drawn for it on a 24 × 24 grid with a 1.5 px round stroke in `currentColor`. They are not a package and no file is loaded: copy the SVG, or the sprite, into your page.
- An icon is 24 × 24 px as written, and 16 px inside a `.luz-btn`. For an icon that must follow the text size, set `width="1.5em" height="1.5em"`.
### Without JavaScript
The copy buttons are hidden. The grid still shows every icon and its name.
### Keyboard and ARIA
Tab reaches each copy button; Enter or Space copies the SVG.
- Each button is named by its own text and the icon's name, with `aria-labelledby`: "Copy SVG Plus".
- The icons are `aria-hidden="true"` and `focusable="false"`: the name is the text under them, or the `.u-sr-only` text of the button that holds them.
- Info and warning always come with words. A lone glyph says nothing to someone who cannot see its shape or its colour: put the words beside it, or give a stand-alone icon `role="img"` and a name.
- The result of each copy is announced in a polite live region.
### When to use
Use an icon grid to let readers browse a set of icons and copy the one they need.
### When not to use
Do not use it to lay out icons that do something: it is a catalogue, not a toolbar.
- For a row of actions, use buttons with text in an [action group](https://nandovejer.github.io/luz/docs/components/layout/#objects-actions).
- Never use an icon as the only label of an action: give it its name as text, visible or in a `.u-sr-only` span.
- For a logo or an illustration, use an `