Skip to main content
/mantle

Icons

A list of custom icons that are used throughout ngrok UI.

import {	AutoThemeIcon,	NgrokLettermarkIcon,	NgrokWordmarkIcon,	SortIcon,	ThemeIcon,	TrafficPolicyFileIcon,} from "@ngrok/mantle/icons"; function IconGallery() {	return (		<>			<SortIcon mode="time" direction="newest-to-oldest" />			<ThemeIcon theme="system" />			<AutoThemeIcon />			<TrafficPolicyFileIcon />			<NgrokLettermarkIcon />			<NgrokWordmarkIcon />		</>	);}

Color-coded icons

Icons inherit the text color, so most icons stay neutral. Tint an icon only when its color carries a status: success, warning, danger, or info. Leave decorative icons, navigation icons, and icons inside buttons in the text color.

  • Pair the color with a second cue. A tinted icon always sits beside a text label, or its shape already states the status (a check, a warning triangle, an X). Color alone fails WCAG 1.4.1: some readers cannot tell red from green.
  • Use the semantic tokens. Write text-success-600, text-warning-600, text-danger-600, or text-info-600, not a raw hue such as text-green-600. The semantic tokens keep their meaning in light and dark mode.
  • Use one meaning for each color. Danger red means an error or a destructive result. Do not use it for an icon that is only important.
  • Keep the label in the body color. Tint the icon, not the text beside it, so the label stays readable.

Online

Degraded

Offline

import { Icon } from "@ngrok/mantle/icon";import { CheckCircleIcon } from "@phosphor-icons/react/CheckCircle";import { WarningIcon } from "@phosphor-icons/react/Warning";import { XCircleIcon } from "@phosphor-icons/react/XCircle"; <>	<p className="flex items-center gap-2">		<Icon svg={<CheckCircleIcon weight="fill" />} className="text-success-600" />		Online	</p>	<p className="flex items-center gap-2">		<Icon svg={<WarningIcon weight="fill" />} className="text-warning-600" />		Degraded	</p>	<p className="flex items-center gap-2">		<Icon svg={<XCircleIcon weight="fill" />} className="text-danger-600" />		Offline	</p></>;

API Reference

All custom icons are exported from @ngrok/mantle/icons.

SortIcon

A sort direction indicator icon with different modes and directions.

The props are a discriminated union on mode: each mode accepts its own direction values.

PropTypeDefaultDescription
mode"alphanumeric"Sort by alphanumeric order.
direction"asc" | "desc""asc" for A to Z and 0 to 9, "desc" for the reverse.
mode"time"Sort by time.
direction"newest-to-oldest" | "oldest-to-newest" | "asc" | "desc""newest-to-oldest" (or "desc") for newest first, "oldest-to-newest" (or "asc") for oldest first.

TrafficPolicyFileIcon

The ngrok traffic policy file icon.

AutoThemeIcon

An icon that automatically adapts to the current applied theme.

ThemeIcon

An icon for a specific theme.

PropTypeDefaultDescription
theme"system" | "light" | "dark"The theme to display.

NgrokWordmarkIcon

An inline SVG of the ngrok wordmark logo; fill color follows the color CSS property.

NgrokLettermarkIcon

An inline SVG of the ngrok lettermark "n" logo; fill color follows the color CSS property.

Icon reference

This table is intentionally duplicated in plain markdown so readers (and AI agents) consuming the raw .mdx source can get full icon context without JSX rendering.

IconDescription
SortIconSort direction indicator icon with mode ("alphanumeric" or "time") and direction variants.
TrafficPolicyFileIconThe ngrok traffic policy file icon.
AutoThemeIconIcon that automatically adapts to the currently applied theme.
ThemeIconTheme-specific icon controlled by the theme prop ("system", "light", or "dark").
NgrokWordmarkIconAn inline SVG of the ngrok wordmark logo; fill color follows the color CSS property.
NgrokLettermarkIconAn inline SVG of the ngrok lettermark "n" logo; fill color follows the color CSS property.