Skip to contentSkip to navigation
CatalogueCatalogue

Icons

Thousands of Material Symbols that follow their text, outlined or filled.

On this page

Import

import { Icon } from '@envsemble/envui';

Usage

import { Button, Column } from '@envsemble/envui';
import { IconAdd } from '@envsemble/envui/icons/Add';
import { IconHome } from '@envsemble/envui/icons/Home';

<Column gap={4}>
  <IconHome filled label="Home" />
  <Button startIcon={<IconAdd />}>Create project</Button>
</Column>;
NameTakes
SymbolsMaterial Symbols Rounded, bundled and imported one by one: Icon<Name> from @envsemble/envui/icons/<Name>
filledThe filled form of a standalone symbol; navigation and tabs fill the selected one themselves
labelThe accessible name of a meaningful standalone icon; leave it out for decoration
toneA status tone's text color, --env-color-fg-{tone}, such as success for a step that is done; neutral, the default, keeps the text's
IconThe SVG that envUI's symbols render: currentColor, 1 em, and hidden unless labelled
Your ownA logo or an icon of the application's own: Graphic, which every icon slot sizes like a symbol

The words of the figures

  • Icons follow their text: nothing to do; a symbol takes currentColor and the size its control or text gives it.
  • A name when it stands alone: label on a meaningful standalone symbol; without it the icon is hidden from assistive technology.

Composition

  • Copy an icon's import from the list on the Icons page of the catalogue. Each icon has its own path, such as @envsemble/envui/icons/Add for IconAdd.
  • Icons take the color of their text; tone gives a status icon its tone's color instead, such as the done and failed steps of a run. Decorative icons stay hidden from assistive technology; icon-only controls need an accessible name.

The symbols are Material Design's Material Symbols, in their Rounded style, under the Apache License 2.0; the package carries the license and its notice.

TypeScript declarations provide the complete public API.

Words in code

WordsIn code
An icon buttonIconButton with the icon and an aria-label
An icon before the labelstartIcon on Button or a field, icon on a menu item
A filled iconfilled on the symbol; navigation and tabs fill the selected one themselves
Our own logo or iconGraphic, with the file in src or the SVG component as its children
The icon's nameIts import, such as IconSettings from @envsemble/envui/icons/Settings