The icon set lives as a directory of SVG files and a set of tables in the Brand Book. Neither hands you a coloured, sized file. This tool does: search it, filter it by the Brand Book's categories, pick an icon, set its colour and size, and take it in the form the job needs.
If the tool exports it, it is the brand's icon.
How to use it
- Search by name, or pick a category
- Select an icon to open its band under the toolbar
- Pick an export colour from the palette, or set a custom hex
- Set an export size in pixels, from 16 to 512
- Copy or download in the format the job needs
The tiles are the drawings alone. Hover one, or select it, to read its name; the band names it and the search matches it either way.
The toolbar stays docked at the top of the page as you scroll: what narrows the grid on the left, what the export is made of after it. The band for the selected icon docks under it, so an icon picked four hundred rows down is still in view. Selecting another icon updates it in place, and the close button returns you to the grid. Escape does the same, from the band or from the grid.
From the search field, one Tab reaches the grid. The arrow keys move between icons, Home and End jump to the first and last, and Enter opens the band with focus on the icon's name. Escape in the search field clears it.
Search and categories
Search matches the icon's name, its key and its category, so chevrons returns the whole category and chevron right finds the icon whether you hyphenate it or not. Every word has to match: thumbs up narrows to the one icon rather than widening to everything with either word.
The categories are the Brand Book's own, read from the 4.4 Iconography page at build time. An icon in the directory with no row on that page lands under "Other" and the build says so, which is the prompt to go and list it.
Colour and size
The swatches are the brand palette, in the colour menu in the toolbar, read from the design system's colour tokens when the page loads. See 4.2 Colour for what each one is for. A brand instance that re-points those tokens gets its own swatches with no change to the tool.
The custom hex field is the way out for a spec you do not control, and it is the only way to leave the palette. Brand work stays on the swatches.
The preview stands the icon on the ground it needs. The checkerboard is the default, because that is what an SVG or PNG export is, a transparent file, and it stays for any colour you can actually see on it. The lightest accents you cannot: a pale accent measures well under 2:1 against the paper ground, so a small icon in it all but disappears. Those get the brand surface they contrast with instead. Nothing about the file changes; every SVG and PNG export is transparent whatever the preview stands on.
Exports carry the palette's base step. An icon placed on a dark surface in a page takes the token's light or lighter step through currentColor, not a baked value. See 4.2 Colour for how the modes pair.
Size is the exported pixel size. The band's preview is chrome and cannot grow to 512 px, so when it shows the icon smaller than you asked for, the note beside it says at what percentage. Reset returns the colour and size to their defaults and leaves your selection alone.
Exports
Pick a format, then copy it or download it. Five formats, two verbs, and the same artefact either way.
| Format | What you get | Colour and size |
|---|---|---|
| SVG | A standalone file: xmlns restored, explicit width and height, the colour baked in as hex |
Applied |
| PNG | The same drawing rasterised at the chosen size on a transparent background | Applied |
| HTML snippet | The design-system form: the wrapper with data-icon, aria-hidden and currentColor |
Not applied |
| CSS value | A url('data:image/svg+xml,...') value for background-image, with the colour baked in |
Applied |
| data-icon key | The key alone, the value data-icon takes on an wrapper that already exists |
Not applied |
Copy puts the format on the clipboard. For PNG that is the image itself, which not every browser will accept; when yours will not, it says so and download still works. Download writes the file.
The key is the one format with no file behind it, so Download is off while it is selected and the option says so. It is the format for an icon already on the page: the wrapper is written, the key is the part that changes. The same key is also inside the HTML snippet, and the line under the preview shows it in place of a filename.
The HTML snippet is the odd one out on purpose. Inline icons inherit their colour from the text around them and their size from the wrapper, which is the whole point of the convention. Baking a colour into that snippet would break the convention the moment it was pasted. The rule, and the standalone file as its one exception, is in the Iconography documentation.
The browser renders the PNG at exactly the pixels you asked for. Nothing leaves the page.
Filenames
The name is shown under the preview before you export, and it says what the file is. The key has no file, so on that format the line shows the key itself:
| Format | Filename |
|---|---|
| SVG, palette colour | icon_blackdoctor_arrow-up_off-black_24.svg |
| PNG, palette colour, 512 px | icon_blackdoctor_arrow-up_red_512.png |
| SVG, custom hex | icon_blackdoctor_arrow-up_custom-ff0066_24.svg |
| HTML snippet | icon_blackdoctor_arrow-up.html |
| data-icon key | No file — the line shows arrow-up |
Type, brand, key, colour, size: the Logo Tool's convention, underscores between the fields and hyphens inside them, because both the key and the colour name carry hyphens of their own. Nobody has to open the file to find out which colour it carries or which brand it belongs to, and a custom colour says so in the name. The HTML snippet carries neither colour nor size, so its name does not claim to.
What not to do
Do not paste an exported SVG where an inline icon belongs. Inline icons take their colour from the text and their size from the wrapper; a baked-in hex freezes both. The HTML snippet is the format for that.
Do not reach for PNG on the web. The SVG is smaller and stays sharp. PNG is for the places that cannot take vector: decks, email, some ad platforms.
Do not set a custom hex for brand work. The swatches are the palette; the custom field is for the cases it does not cover, and those are rare enough to be worth a conversation.
Where the icons come from
Every icon comes from assets/images/svg-icons/, the same directory the {{icon:name}} shorthand reads. The doc generator inlines the set into the tool page at build time, so the tool is current with everything the docs publish and needs no network request to run. Add an icon to the directory, list it on the Brand Book's Iconography page, run the generator, and it appears in the tool.
The icon set is owned here
The swatches follow the theme's tokens. The icons come from this repo's own icon directory (assets/images/svg-icons/), owned here rather than inherited from the engine, so replacing artwork is a file swap. Ninety-eight icons, every one BlackDoctor's — ninety-seven drawn by hand and one, close-large, derived from them — grouped on the Iconography page. Those groups are the Category filter here.