Koala logo Design
Overview Colours Typography Icons Dark mode Avatar pickers Avatars Badges Breadcrumbs Buttons Cards Empty states Nav items Stat cards Steppers Sticky headers Switchers Tables Tabs Timelines Charts Rich text Tooltips Action menus Forms Autocomplete Modals Notifications Side trays

Icons

All icons available via the koala-icon tag helper, rendered from the IconName enum.

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-brand" />

Navigation

Directional arrows and chevrons for navigation and breadcrumbs.

ChevronRight
ChevronDown
ChevronUp
ChevronLeft
ArrowLeft
ArrowRight
ArrowUpRight
ArrowDownRight 
<koala-icon name="ChevronRight" />
<koala-icon name="ArrowLeft" />
<koala-icon name="ArrowUpRight" class="text-brand" />

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 
<koala-icon name="Plus" />
<koala-icon name="Search" class="text-gray-400" />
<koala-icon name="Trash" class="text-red-500" />

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 
<koala-icon name="House" />
<koala-icon name="User" class="text-gray-500" />
<koala-icon name="Mail" size="Small" />

Status

Icons for alerts, notifications, and visibility states.

Info
AlertCircle
AlertTriangle
CheckCircle
XCircle
Ban
Eye
EyeOff
Bell 
<koala-icon name="Info" class="text-blue-500" />
<koala-icon name="CheckCircle" class="text-emerald-500" />
<koala-icon name="AlertTriangle" class="text-amber-500" />

UI

Icons for interface chrome, settings, and layout controls.

Sun
Moon
Menu
Sidebar
Settings
LogOut
ChevronsUpDown
GripVertical
Maximize
Minimize
PanelLeft 
<koala-icon name="Sun" />
<koala-icon name="Settings" class="text-gray-500" />
<koala-icon name="Menu" size="Large" />

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
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-icon name="Sale" />
<koala-icon name="Purchase" />
<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>

Brand

Koala brand mark and animated spinner.

KoalaLeaf
Spinner 
<koala-icon name="KoalaLeaf" class="text-brand" />
<koala-icon name="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-brand" />

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.