Koala logo Design
Koala logo Design

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
ArrowUp
ArrowDown
ArrowUpDown 
<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
Funnel
EditPencil
PlusCircle
LinkSlash
WandSparkles
CheckSquare
ClipboardCheck 
<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
Apartment
Banknotes
CircleDollarSign
Compass
ContactCard
Crown
CrownSimple
FileCheck
Flag
GraduationCap
Infinity
LayoutGrid
Monitor
Receipt
ReceiptText
Scale
Video
Waves 
<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
CheckCircleFilled
HelpCircle
MessageCircleQuestion 
<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
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>

Rich text formatting

Note editor toolbar icons.

Bold
Italic
Underline
StrikeThrough
Code
Quote2
ListUnordered
ListOrdered

Social

Filled-style social media icons.

Facebook
Instagram
LinkedIn

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

<!-- 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-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.