Icons

Updated: Sep 24, 2026

The toolkit provides an optional collection of icons designed for Meta Ray-Ban Display. Toolkit components accept icon data through IconSource slots and own each icon’s size, alignment, spacing, and tint.

Icon assets

Install the icon collection from npm:

npm install @wearables-ui-toolkit/icons

Use the hosted Icon Browser⁠ to search the collection by name or keyword and compare filled and outline styles. See the @wearables-ui-toolkit/icons npm package⁠, or browse the icons package on GitHub⁠ to see the available assets and package source.

The @wearables-ui-toolkit/icons package ships the public SVG icon set as a separate, optional dependency. Icon assets are not licensed under the Apache License 2.0. See the Meta Wearables Developer Terms⁠ and the package license⁠, which reproduces verbatim excerpts from Sections 2 and 10.

The package provides:

tree-shakeable named exports, one per asset;
individual assets at @wearables-ui-toolkit/icons/svg/<name>.svg;
manifest.json and keyword-index.json for searchable icon tools; and
an opt-in browser subpath for interfaces that select arbitrary manifest assets at runtime.

Most icons include filled and outline variants, such as airplaneFilled and airplaneOutline. Import icons by name so the bundler can retain only the assets the application uses:

import {Button} from '@wearables-ui-toolkit/mrbd';
import {airplaneFilled} from '@wearables-ui-toolkit/icons';

<Button icon={airplaneFilled} title="Airplane mode" />;

Avoid namespace imports or collecting every export into a registry because that retains the complete icon collection in the application bundle.

Use custom icon assets

An icon slot accepts an IconSource in one of three forms:

Form	Shape	Use it for
Inline vector	`viewBox` plus `paths`	Monochrome glyphs that should render without a separate asset request.
Asset reference	`uri` plus optional `tinted`	Bundled files, URLs, and data URIs.
Shorthand	Plain URL string	The tinted asset-reference form.

Declare reusable icon data at module scope so its reference stays stable across renders:

import {Button, type IconSource} from '@wearables-ui-toolkit/mrbd';

const replyIcon: IconSource = {
  viewBox: '0 0 24 24',
  paths: [{d: 'M10 9V5l-7 7 7 7v-4c5 0 8 2 9 5 .5-5-3-9-9-9z'}],
};

<Button icon={replyIcon} title="Reply" />;

The owning component chooses the slot size from the toolkit icon scale and applies its semantic tint. Leave tinted at its default for monochrome symbols. Set tinted: false only for full-color artwork:

import type {IconSource} from '@wearables-ui-toolkit/mrbd';
import appIconUrl from './app-icon.png';

const appIcon: IconSource = {uri: appIconUrl, tinted: false};

See IconImage for the complete IconSource fields, renderer props, and rendering behavior. Use IconWithContainerMaterial only when authoring content that deliberately combines an icon with a material container.

Icon slots versus image props

Use icon slots for symbols the component owns and tints. Use image props for photos or branded artwork so the asset keeps its color and receives appropriate alternative text.

Content	Use	Notes
Monochrome symbol	An `IconSource` prop such as `icon` or `statusIndicatorIcon`	Decorative; sized and tinted by the component.
Avatar photo	`src` or `avatarSrc`	Pair with the corresponding alternative-text prop.
Modal artwork	`bannerSrc` or `logoSrc`	Pair with `bannerAlt` or `logoAlt`.

A photo URL passed to an icon slot receives the default tint and becomes a silhouette.

Recommended patterns

Prefer the published collection before creating a new symbol.
Use filled artwork when it remains clearer at the component’s rendered size.
Let components own icon dimensions, margins, and tint.
Use semantic tint cases or color tokens instead of hardcoded colors.
Name the action on the owning component. Icons are decorative and do not provide an accessible name.

See also:IconImage · Colors · Accessibility