An icon picker is a text field that holds a Material Symbols name. A panel opens on top of it with instant search over all icons, Recent and Popular.
Every example on this page is the real component, not a picture. There is no Figma component: the pattern was designed in the repo.
A text field that holds a Material Symbols name. The picker opens on top of the field. The preview below is only for this page: the picker itself adds nothing to a page that shows the icon.
Click or Tab into the field. Search all icons, or pick from Recent and Popular.
An icon picker is a text field that holds a Material Symbols name. A panel opens on top of it with instant search over all icons, Recent and Popular.
It is for back-office and docs forms where a person chooses the icon of a banner, a notification, a menu item, a tile or a category. The picker stores the name, not a rendering. It has no Figma component: it was designed in the repo.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use the icon picker. Specifications holds the values: tokens, dimensions, states and requirements. Code shows how to add it to a field.
Use the icon picker for every field that holds a Material Symbols name. Use it to:
To show an icon, use a material-symbols-outlined span. The picker is for choosing the name.
To choose between a few fixed options use eco-select or eco-radio.
| The field… | Use |
|---|---|
| holds a Material Symbols name (banner, notification, menu item, tile, category) | Icon picker |
| only shows an icon | A material-symbols-outlined span |
| chooses between a few fixed options | eco-select or eco-radio |
elevation-b-80 shadow.aria-label and the title.border-selected frame.The field under the panel is an Input with data-icon-picker. Inside an Input field the picker uses the .input-wrap as its anchor, so the panel covers the whole field.
The panel opens on top of the field, not under it, so it never runs off the bottom of the window. It has the same width as the field, and sits 12px outside it on each side. Make the field at least as wide as the six icon cells you want to see in a row (about 280px).
Colors, shadow and spacing in the picker are tokens only. Icons in the grid are Outlined, Fill 0, Weight 300, Grade 0, 24px: the same as icons in the components. Token names and values are under Design Tokens in Specifications.
The same behavior on every page.
Click or Tab into the field. A panel opens on top of the field (same width, 12px padding). The search box comes first and has focus. The focus ring on the search box is hidden when the panel was opened with the mouse, and shown when opened with Tab.
With the search box empty, the panel shows Recent (the last 8 picks, kept in localStorage and shared by all pages) and Popular (the top 60). Typing gives an instant search over all icons. Ranked: name starts with, then a name word starts with, then a tag word starts with; each group by popularity. Up to 60 are shown; the header says Results (n). No match: “No icons match …”.
A click on an icon puts the name in the field, fires an input event, closes the panel and returns focus to the field. Esc or a click outside closes the panel without changing the value.
All requirements are listed under Accessibility Requirements in Specifications.
Tab into the field opens the panel with the search box focused. Tab moves through the icons. Enter or Space picks one. Esc closes the panel and keeps the value.
The field needs a visible label. The search box has an aria-label, and every icon is a button named by its icon name, with aria-pressed on the one in the field. The glyphs are aria-hidden.