Iconography <helix-icon name="trash"></helix-icon> Helix has 126 glyphs, 121 of them from Phosphor, drawn on a 256 box at Phosphor's bold weight. We keep Phosphor's own geometry. Rescaling to a 24 box would change the optical weight of every glyph, and the set would stop matching Phosphor. We use the bold weight because Phosphor's regular weight is a hairline beside the medium weight of Helix text. An icon that looks lighter than the words next to it does not work as a mark. Register the set import '@fusion.dev/helix/icon' The Icon entry registers all 126 glyphs by name, so name draws any glyph in the set. @fusion.dev/helix/icon/all is the same entry and registers the same set. Size and color come from the surrounding text An icon has no size and no color property. It is 1em square and currentColor, so it takes the size and color of the text it sits in: <span data-tone="danger"> <helix-icon name="warning"></helix-icon> Careful </span> Inside a control, --helix-size-icon sets the size, and it follows the region's density. So an icon in a small button is smaller without any extra setting. Decorative and named icons <!-- Decorative: the text beside it already says what this is. --> <helix-button> <helix-icon name="trash"></helix-icon> Delete </helix-button> <!-- Named: there is no text, so the icon has to carry the name. --> <helix-icon-button label="Delete" name="trash" ></helix-icon-button> An icon with no label is hidden from assistive technology. Leave out label when text beside the icon says what it is. Add a label when there is no text. Icon.Button takes a label because it never has text beside it. Mirror an icon on right-to-left pages <helix-icon mirror name="arrow-right" ></helix-icon> Icon names describe physical directions, so arrow-right points right on every page. When an arrow means forward or back, add mirror to flip it on a right-to-left page. Every caret Helix draws already flips. Localization has the rest. Import a glyph import { trash } from '@fusion.dev/helix-icons' Each glyph is data in the form { content, name, viewBox }. You can put one in your own markup, in a canvas, or anywhere you do not want an element. Every name Helix uses is checked against the glyphs that exist, so a typo fails the build. Pass a glyph to the icon property to draw it, from any set: import { trash } from '@fusion.dev/helix-icons' <helix-icon icon={trash} /> icon is a property because a glyph is an object, and an attribute holds only a string. Frameworks can set properties. Plain HTML cannot, so it uses name. If both are set, icon wins. icon also keeps your bundle small. name looks up glyphs in an index of the whole set, and no bundler can tree-shake that index. If you render one icon by name, you ship the whole set: 17 kB gzipped for 126 glyphs. With icon, you ship only the glyph you import. icon also draws glyphs from outside this set. Anything that exports the same shape works: Phosphor at another weight another icon library your own drawings const dot = { content: '<circle cx="12" cy="12" r="10" fill="currentColor" />', name: 'dot', viewBox: '0 0 24 24' } Choose a weight with a subpath import { caretDown } from '@fusion.dev/helix-icons/regular' import { trash } from '@fusion.dev/helix-icons/bold' The default is bold. /bold is the same set, with the weight in its path. Each weight is a separate set of drawings, so each weight is a subpath. Phosphor's weights are outlined, filled paths. caret-down is a12,12 at bold and a8,8 at regular, so CSS cannot turn one weight into another, and every weight offered adds bytes. Bundlers tree-shake a subpath at each import site. A weight attribute would put every weight into the index that name reads, and raise your bundle from 15 kB to about 90. Only the default weight has that index, so name always draws bold. To use the set in another weight, import the glyphs and pass them to icon. Build your own icon set The package includes the command that builds this set, so you can add any glyph yourself: npx helix-icons build --source ./brand-icons --out src/icons.ts import { peak } from './icons' <helix-icon icon={peak} /> The command reads a directory of SVG files and writes the module that helix-icon draws from. It works the same way for your own drawings, another library's, or the 1,404 Phosphor glyphs this set does not include: npx helix-icons build \ --source node_modules/@phosphor-icons/core/assets/regular \ --list mine.txt --out src/icons.ts Use --suffix for a set that puts the weight in the file name, such as Phosphor's bold caret-down-bold.svg. --index also writes the record that name reads. Use it only if your own elements take a name in markup, because no bundler can remove that record. The command stops with an error when a name appears in two sources. With an order of precedence, the glyph on the page would come from whichever directory ranked higher, and nothing would look wrong. Draw your own glyphs by name registerIcons makes your glyphs resolve by name, so plain HTML can draw them: import { registerIcons } from '@fusion.dev/helix/icon' import { peak } from './icons' registerIcons([peak]) <helix-icon name="peak"></helix-icon> Each glyph registers under its own name. To register a whole set, build it with --index and pass the icons record the command writes to registerIcons. registerIconLibrary resolves names under a prefix through a function of your own, such as one that points into a sprite sheet or fetches from a server. After registerIconLibrary('brand', resolve), name="brand:peak" draws the glyph that resolve('peak') returns. To sit beside the Helix set, draw a glyph with the same geometry, a 256 box at the bold weight. A glyph drawn at a different weight stands out next to the others. Product marks The set includes the Fusion, Helix, and Cortex marks, and the React and HTML5 logos, so <helix-icon name="helix"> draws the Helix mark. A mark identifies a product. An icon stands for an action. The Helix and Cortex marks are each one rounded body with material removed. Neither is a pictogram of a metaphor, because each stands beside the Fusion mark, a geometric monogram.