Icon

Visual cues for enhancing user interaction, powered by ng-icons.

Default

The standard icon usage with the hlm directive for consistent styling.

Sizes

Icons can be sized using the size attribute or predefined variants.

Responsive Size

Adjust icon sizes responsively using Tailwind CSS text-size utilities.

Multiple Icon Sets

Mix and match icons from different libraries like Lucide and Remix Icon.

Lucide Icons

CircleArrowUp
Bell
CheckCircle

Remix Icons

Angular
GitHub
Twitter

Lucide Library

Browse available Lucide icons. Load the full set on demand to explore the entire library.

lucideCheck
lucideCircleArrowUp
lucideBell
lucideCheckCircle
lucideSearch
lucideHome
lucideUser
lucideSettings
lucidePlus
lucideTrash
lucideChevronDown
lucideMail
lucideGithub
lucideLayers
lucideShield
lucideChevronRight

API Reference

DirectiveSelectorInputs
HlmIcon[hlmIcon], ng-icon[hlm]
  • size: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | string
  • color: string

Installation & Usage

1. Installation

2. Imports

3. Usage