Icons - Koala Design

Size variants

Five sizes available via the size attribute. Default is used when omitted.

ExtraSmall

Small

Default

Large

ExtraLarge

<koala-icon name="Check" />
<koala-icon name="Plus" size="Small" />
<koala-icon name="House" size="Large" class="text-primary" />

Navigation

Directional arrows and chevrons for navigation and breadcrumbs.

ChevronRight

ChevronDown

ChevronUp

ChevronLeft

CornerDownRight

ArrowLeft

ArrowLeftToLine

ArrowRight

ArrowUpRight

ArrowDownRight

ArrowUp

ArrowDown

ArrowUpDown

ArrowLeftRight

<koala-icon name="ChevronRight" />
<koala-icon name="ArrowLeft" />
<koala-icon name="ArrowUpRight" class="text-primary" />

Actions

Icons for interactive actions like create, edit, delete, and search.

Plus

X

Check

Copy

Pencil

Trash

Download

Upload

RefreshCw

ExternalLink

MoreHorizontal

MoreVertical

Search

Filter

Funnel

EditPencil

PlusCircle

LinkSlash

WandSparkles

CheckSquare

ClipboardCheck

<koala-icon name="Plus" />
<koala-icon name="Search" class="text-on-surface-hint" />
<koala-icon name="Trash" class="text-danger" />

Objects

Icons representing entities, locations, and real-world objects.

House

Building

User

Users

MapPin

Mail

Phone

FileText

Calendar

Clock

CreditCard

Landmark

MessageSquare

Smartphone

Camera

Link

Globe

Shield

Star

Award

Briefcase

Key

Lock

Apartment

Banknotes

CircleDollarSign

Compass

ContactCard

Crown

CrownSimple

FileCheck

Flag

GraduationCap

Infinity

LayoutGrid

Monitor

Receipt

ReceiptText

Scale

GitCompare

GitBranch

Video

Waves

<koala-icon name="House" />
<koala-icon name="User" class="text-on-surface-muted" />
<koala-icon name="Mail" size="Small" />

Status

Icons for alerts, notifications, and visibility states.

Info

AlertCircle

AlertTriangle

XCircle

Ban

Eye

EyeOff

Bell

Workflow

CircleDot

CheckCircleFilled

HelpCircle

MessageCircleQuestion

<koala-icon name="Info" class="text-info" />
<koala-icon name="Check" class="text-success" />
<koala-icon name="AlertTriangle" class="text-warning" />

UI

Icons for interface chrome, settings, and layout controls.

Sun

Moon

Menu

Sidebar

Settings

LogOut

ChevronsUpDown

GripVertical

Maximize

Minimize

PanelLeft

QrCode

<koala-icon name="Sun" />
<koala-icon name="Settings" class="text-on-surface-muted" />
<koala-icon name="Menu" size="Large" />
<koala-icon name="QrCode" />

Domain

Icons for Portal domain entities. Also used in sidebar navigation via <koala-nav-item>.

Quote

Transaction

Client

Partner

Branch

Activity

Discount

Fee

Sale

Purchase

Both

LinkedTransaction

<koala-icon name="Quote" />
<koala-icon name="Transaction" />
<koala-icon name="Client" />
<koala-icon name="Partner" />
<koala-icon name="Branch" />
<koala-icon name="Activity" />
<koala-icon name="Discount" />
<koala-icon name="Fee" />
<koala-type-icon type="Sale" />
<koala-type-icon type="Purchase" />
<koala-type-icon type="Both" />
<koala-icon name="LinkedTransaction" />

<!-- Also used in sidebar navigation -->
<koala-nav-item href="/partner/quotes" is-active="@isQuotes" label="Quotes">
    <path d="M18 7c0-5.333-8-5.333-8 0"></path>
    <path d="M10 7v14"></path>
    <path d="M6 21h12"></path>
    <path d="M6 13h10"></path>
</koala-nav-item>

Type icon (quote/transaction type)

Use <koala-type-icon> to render the canonical glyph for a quote/transaction type: Sale (house then arrow), Purchase (arrow then house), Both (house then arrow then house). Saves repeating two-or-three SVGs inline next to every reference/price row. Inherits text colour from its parent (Tailwind text-*).

Sale · Small

Sale · Default

Sale · Large

Purchase · Small

Purchase · Default

Purchase · Large

Both · Small

Both · Default

Both · Large

<koala-type-icon type="Sale" />
<koala-type-icon type="Purchase" />
<koala-type-icon type="Both" />

<!-- Sizes -->
<koala-type-icon type="Sale" size="Small" />
<koala-type-icon type="Sale" size="Large" />

<!-- Colour follows the parent text colour -->
<span class="text-on-surface-hint">
    <koala-type-icon type="Sale" />
</span>

Attribute	Type	Default	Description
type	QuoteType	Sale	Sale (house + arrow), Purchase (arrow + house), Both (house + arrow + house)
size	TypeIconSize	Default	Small (16/10px), Default (20/14px), Large (28/20px) — sizes the house and arrow SVGs in tandem

Rich text formatting

Note editor toolbar icons.

Bold

Italic

Underline

StrikeThrough

Code

Quote2

ListUnordered

ListOrdered

Social

Filled-style social media icons.

Facebook

Instagram

Brand

Koala brand mark and animated spinner.

KoalaLeaf

Looking for a spinner? Use koala-spinner — a dedicated tag helper, not an icon.

<koala-icon name="KoalaLeaf" class="text-primary" />

<!-- For the animated brand spinner, use the dedicated tag helper: -->
<koala-spinner />

Usage

Use the <koala-icon> tag helper with a name from the IconName enum. Colour is inherited from the parent text colour or set via a Tailwind class.

<koala-icon name="Check" />
<koala-icon name="Plus" size="Small" />
<koala-icon name="House" size="Large" class="text-primary" />

Available sizes: ExtraSmall, Small, Default, Large, ExtraLarge

Icons render as inline SVGs with stroke="currentColor", so they inherit the text colour of their parent element. Override with any text-* utility class.

Type icon

Compact glyph that shows whether a quote / transaction is a Sale, Purchase, or Sale + Purchase. Composes House + ArrowRight icons in the configured arrangement.

<koala-type-icon>

Sale

Purchase

Sale & purchase

Attribute	Values	Notes
type	Sale, Purchase, Both	Required. Sale = house + arrow. Purchase = arrow + house. Both = house + arrow + house.
size	Small, Default, Large	Controls both the house and arrow scale.