For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/wally-icon.md.

WallyIcon

Wally, the mascot for Wallarm’s AI assistant — the mark that signals an AI surface rather than a general-purpose icon, so keep it for the assistant and reach for the icon set for everything else. simple is the bare mark and circle wraps it in its own badge so it can sit on a coloured surface; both are sized by height from 16px to 64px, with the width following.

Source · Storybook

Usage

import { WallyIcon } from '@wallarm-org/design-system/WallyIcon';

Examples

Styles

The two variants side by side. The badge is what lets the mark keep its edge on a coloured or busy surface; on a plain panel the bare mark is enough.

Sizes

xs to xl in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping.

Props

PropTypeDefaultDescription
variantWallyIconStyle | undefinedsimple
idstring | undefined
tabIndexnumber | undefined
onChangeChangeEventHandler<T, Element> | undefined
typestring | undefined
namestring | undefined
hrefstring | undefined
targetstring | undefined
heightstring | number | undefined
widthstring | number | undefined
maxstring | number | undefined
minstring | number | undefined
size{ xs: string; sm: string; md: string; lg: string; xl: string; }md