Icon
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
Any Font Awesome icon by its name: thousands of icons for weather, travel, sport, money, home, health and more, plus the logos of brands and apps, in three styles.
The icons come from the Font Awesome Pro fonts Blotch hosts for every frame, so they stay crisp on e-ink at any size, follow dark mode, and still show when another website is down. Use them instead of loading icon pictures from an API or another website.
Find an Icon
Search by name or by what the icon shows, pick a style, then click an icon to copy the code that draws it.
Import
import { Icon } from "~lib/icon";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
name | IconName | Yes | N/A | The Font Awesome name of the icon, such as "bolt", "github" or "fa-house" |
variant | "solid" | "regular" | "light" | No | "regular" | How the icon is drawn, from filled shapes to light lines |
size | number | No | 24 | Width and height of the square it takes, in pixels |
label | string | No | N/A | What the icon means, for screen readers. Leave it out when text says it |
bearing | number | No | N/A | Turns the icon that many degrees clockwise |
Examples
Styles
regular is the default and draws the icon in outline. solid fills its shapes in, which keeps a small icon clear on an e-ink frame, and light suits a large icon. Font Awesome's thin style isn't offered: its hairlines break apart on e-ink.
Sizes
Brands
The logos of brands and apps work the same way. They come in one style, so variant makes no difference to them.
In the Text's Color
An icon takes the color of the text around it, so it shows on an inverted block too.
Turned by a Bearing
With a Label
Short Names
An Icon an Installer Picks
An Icon Input stores the icon an installer picks as its Font Awesome class, such as fa-house. Icon draws that class as well as a plain name, and inputIconName turns the input's value into a name that Icon, Badge's icon and every other icon prop take. It is undefined while the input is unset, so the widget can say what to pick:
import { Icon, inputIconName } from "~lib/icon";
import { EmptyState } from "~lib/feedback/empty-state";
import { useInputs } from "~lib/use-inputs";
export const Widget = () => {
const { icon } = useInputs();
const name = inputIconName(icon);
if (!name) return <EmptyState title="Pick an icon" />;
return <Icon name={name} size={64} variant="solid" />;
};
Pointing a Way
bearing turns an icon that many degrees clockwise, so an arrow that points up, such as location-arrow-up or circle-arrow-up, points the way of a compass bearing. Weather APIs give the direction the wind comes from, so add 180 to point the arrow the way the wind blows:
import { Icon } from "~lib/icon";
const WindDirection = ({ degrees }: { degrees: number }) => (
<Icon name="location-arrow-up" bearing={degrees + 180} size={32} />
);
compass given a bearing draws an arrow in a ring turned the same way, since Font Awesome's own compass points at a corner.
Showing Your Weather API's Conditions
Weather APIs describe conditions with codes of their own. Map them to icon names in your widget. For example, OpenWeatherMap's icon field:
import { Icon, type IconName } from "~lib/icon";
const CONDITIONS: Record<string, IconName> = {
"01d": "sun",
"01n": "moon",
"02d": "cloud-sun",
"02n": "cloud-moon",
"03d": "cloud",
"03n": "cloud",
"04d": "cloud",
"04n": "cloud",
"09d": "cloud-showers-heavy",
"09n": "cloud-showers-heavy",
"10d": "cloud-rain",
"10n": "cloud-rain",
"11d": "cloud-bolt",
"11n": "cloud-bolt",
"13d": "snowflake",
"13n": "snowflake",
"50d": "cloud-fog",
"50n": "cloud-fog",
};
const Condition = ({ code }: { code: string }) => (
<Icon name={CONDITIONS[code] ?? "cloud"} size={64} />
);
Battery and Signal Helpers
batteryIconName and signalIconName pick the right icon for the frame's own battery and signal, so you do not have to choose the bands yourself.
import { Icon, batteryIconName, signalIconName } from "~lib/icon";
import { useBatteryLevel, useSignalStrength } from "~lib/device-information";
const Status = () => {
const { percentage, isCharging } = useBatteryLevel();
const strength = useSignalStrength();
return (
<div className="flex items-center gap-2">
<Icon name={batteryIconName(percentage, isCharging)} size={32} />
<Icon name={signalIconName(strength)} size={32} />
</div>
);
};
A charging battery shows battery-bolt whatever its level. The signal goes from signal-bars-slash for none to signal-bars for full.
News Categories
subjectIconName picks an icon for a category name from a news API, such as "business" or "Technology". A category it does not know gets the newspaper.
import { Icon, subjectIconName } from "~lib/icon";
const Story = ({ category }: { category: string }) => (
<Icon name={subjectIconName(category)} size={32} label={category} />
);
| Category | Icon |
|---|---|
business | briefcase |
entertainment | film |
food | utensils |
health | heart |
politics | landmark |
science | flask |
sports, sport | futbol |
technology, tech | microchip |
world, nation | globe |
general, and anything else | newspaper |
Travel Modes
travelModeIconName picks an icon for a mode or a vehicle type from a directions API, such as "WALKING", "bicycling" or "HEAVY_RAIL". A mode it does not know gets no icon (undefined), so give it one of your own or leave it out.
import { Icon, travelModeIconName } from "~lib/icon";
const Mode = ({ mode }: { mode: string }) => (
<Icon name={travelModeIconName(mode) ?? "car"} size={32} label={mode} />
);
| Mode or vehicle | Icon |
|---|---|
walking, walk | person-walking |
bicycling, bicycle, cycling | bicycle |
driving, drive, driving-traffic, share_taxi | car |
bus, intercity_bus, trolleybus | bus |
transit, rail, heavy_rail, commuter_train, high_speed_train, long_distance_train, monorail | train |
tram, light_rail, cable_car, funicular | train-tram |
subway, metro_rail | train-subway |
ferry | ferry |
A Timeline takes an icon per event, so each step of a route can show how it gets about.
Pollen Types
pollenTypeIconName picks an icon for a type or a plant from a pollen API, such as "GRASS", "TREE", "WEED" or "BIRCH". A kind it does not know gets the leaf.
import { Icon, pollenTypeIconName } from "~lib/icon";
const PollenType = ({ code }: { code: string }) => (
<Icon name={pollenTypeIconName(code)} size={32} />
);
| Type or plant | Icon |
|---|---|
grass, graminales | wheat-awn |
tree, and trees such as birch, oak, alder, olive, pine or japanese_cedar | tree |
weed, ragweed, mugwort | flower |
| anything else | leaf |
Price Moves
trendIconName picks an arrow for a change: arrow-trend-up above zero, arrow-trend-down below it and arrow-right-long at zero. Round the change the way you print it first, so a move too small to show (0.00%) gets the level arrow instead of disagreeing with its figure.
import { Badge } from "~lib/data-display/badge";
import { Icon, trendIconName } from "~lib/icon";
const Change = ({ percent }: { percent: number }) => {
const shown = Number(percent.toFixed(2));
return (
<Badge variant="outline">
<span className="flex items-center gap-1">
<Icon name={trendIconName(shown)} size={16} />
{Math.abs(shown).toFixed(2)}%
</span>
</Badge>
);
};
Use the outline badge. Its text is in the page's ink, and the icon takes that color too.
Short Names
The library has short names of its own for the icons widgets use most, such as clear-day, partly-cloudy-night, battery-charging or signal-2. They still work, and each draws the Font Awesome icon closest to what it names; ICON_NAMES lists them. A few of them stand in front of a Font Awesome icon of the same name: mask draws a face mask, tram a tram on rails, and signal-1 to signal-4 count the four bars of the frame's signal.
| Short name | Draws |
|---|---|
clear-day, clear-night | sun, moon |
partly-cloudy-day, partly-cloudy-night, cloudy | cloud-sun, cloud-moon, cloud |
drizzle, rain, snow, sleet, haze | cloud-drizzle, cloud-rain, cloud-snow, cloud-sleet, sun-haze |
mask | mask-face |
battery-charging | battery-bolt |
signal-0 to signal-4 | signal-bars-slash, signal-bars-weak, signal-bars-fair, signal-bars-good, signal-bars |
ball, chip | futbol, microchip |
walk, tram, accessibility | person-walking, train-tram, wheelchair |
grass, chef-hat, layers | wheat-awn, hat-chef, clone |
helmet, race-car | steering-wheel, car-side |
trend-up, trend-down, trend-flat, candlestick | arrow-trend-up, arrow-trend-down, arrow-right-long, chart-candlestick |
every other short name, such as bus, leaf, bolt, image or flag-checkered | the Font Awesome icon of that name |