Brand Icon

Usage

Brand Icon — wheel inside the rounded square (sign-in, app icons, favicons):

import { BrandIcon } from "@sophic/portal-ui/components/ui/brand-icon";

<BrandIcon size="md" aria-label="Sophic" />

variant defaults to "brand". variant="docs" is a hot-pink frame used on this docs site only.

Sizes

size is the Avatar scale: xs, sm, md (default, 32px), lg, and xl. The mark stays a rounded square; only the edge length comes from the avatar tokens.

Favicon files under @sophic/portal-ui/assets/favicons/ stay at 16, 32, 48, 180, 192, and 512px. Those pixel exports are not the component size prop.

Wheel Mark

Wheel Mark — standalone

The pinwheel on its own when you bring your own surface or layout.

Pinwheel only — when you supply the surface:

import { SophicWheel } from "@sophic/portal-ui/components/ui/sophic-wheel";

<SophicWheel width={35} aria-label="Sophic" />

See Foundations → Overview for the docs tab variant.

Props

Prop

Type

Default