Icons

Use Material icons or custom SVGs.

Example

import { Icon, Screen, Stack } from "ink";
import { home, homeFilled } from "ink/icons";

export default function Icons() {
  return <Screen title="Icons">
    <Stack axis="horizontal" gap={24}>
      <Icon name={home} />
      <Icon name={homeFilled} />
      <Icon name={homeFilled} tone="muted" />
    </Stack>
  </Screen>;
}

Size

<Icon name={homeFilled} size={24} />
<Icon name={homeFilled} size={36} />
<Icon name={homeFilled} size={48} />

Use the Filled suffix for filled icons. Release builds include only the variants you import. Use Buttons for tappable icons.

Icon names

Find names in the Material Symbols catalogue. Convert snake case to camel case: more_horiz becomes moreHoriz. Names starting with a digit use an icon prefix, such as icon360; reserved names use an Icon suffix, such as deleteIcon. Your editor can suggest valid exports.

Use named imports. For dynamic lookups, pass a small object of imported icons to findIcon(collection, name); it returns undefined for unknown names. A dynamic namespace import can bundle the whole catalogue.

Material icons use weight 400.

Custom SVGs

Import an SVG wherever an icon is accepted. Here, the icon is Spotify from Hugeicons.

import { Icon, Stack } from "ink";
import spotify from "./assets/spotify.svg";

<Stack axis="horizontal" gap={24}>
  <Icon name={spotify} size={24} />
  <Icon name={spotify} size={36} />
  <Icon name={spotify} size={48} />
</Stack>

SVG icons use the current text colour. Use a transparent background and paths rather than text or external images. Use Image for colour artwork.

Bundling

Ink bundles only used icons as images. The APK does not include icon fonts or an SVG renderer.

An icon used at sizes 16, 24 and 48 needs only one image, sized for 48. If Ink cannot determine the size during the build, it uses at least 56. Enlarging an icon beyond its generated size can look blurry.