Views uses heroicons—a collection of almost 300 svg icons. We have re-exported these icons under the sub-package @airplane/views/icons to make it easy to add icons to a view.

Basic usage



Each icon can be used in three variants. It's up to you which icon to use for your usecase, but we recommend Solid as a good default and Mini if your icon is in a small format like in a button.
  1. Solid (default): Icon has a filled appearance.
  2. Outline: Icon has an outlined appearance.
  3. Mini: For smaller elements like inside of buttons.

Color and Size

Icons can also be styled with a color and/or a size.

Using icons in other components

Some views components take an icon as a prop.
In the following example, we include an icon on the right side of a button.

Available icons

Refer to the heroicons documentation for a searchable library of all available icons. Each heroicon is available—its name is changed from kebab-case to TitleCase and the word Icon is appended.
For example, the heroicon with name academic-cap can be imported as import { AcademicCapIcon } from "@airplane/views/icons";.

Component API

The color of the icon
"xs" | "sm" | "md" | "lg" | "xl"
The size of the icon