Icons

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

Search Icons

import {
	SortIcon,
	TrafficPolicyFileIcon,
	AutoThemeIcon,
	ThemeIcon,
	NgrokIcon,
} from "@ngrok/mantle/icons";

API Reference

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

SortIcon

A sort direction indicator icon with different modes and directions.

Prop	Type	Default	Description
`mode`	`"alphanumeric" \| "time"`		The sorting mode.
`direction`	`"asc" \| "desc" \| "newest-to-oldest" \| "oldest-to-newest"`		The sort direction.

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.

Prop	Type	Default	Description
`theme`	`"system" \| "light" \| "dark" \| "light-high-contrast" \| "dark-high-contrast"`		The theme to display.

NgrokIcon

The ngrok logo icon.

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.

Icon	Description
`SortIcon`	Sort direction indicator icon with `mode` (`"alphanumeric"` or `"time"`) and `direction` variants.
`TrafficPolicyFileIcon`	The ngrok traffic policy file icon.
`AutoThemeIcon`	Icon that automatically adapts to the currently applied theme.
`ThemeIcon`	Theme-specific icon controlled by the `theme` prop (`"system"`, `"light"`, `"dark"`, and HC modes).
`NgrokIcon`	The ngrok logo icon.