Iconography¶

Icon Sets¶

KMG applications use two icon sets:

Nucleo Icons¶

The primary icon set, included with Argon Dashboard. Prefixed with ni.

Browse all available icons: Nucleo Icons reference

<i class="ni ni-planet"></i>
<i class="ni ni-settings-gear-65"></i>
<i class="ni ni-single-copy-04"></i>
<i class="ni ni-spaceship"></i>
<i class="ni ni-palette"></i>
<i class="ni ni-app"></i>
<i class="ni ni-world-2"></i>
<i class="ni ni-key-25"></i>
<i class="ni ni-delivery-fast"></i>
<i class="ni ni-box-2"></i>
<i class="ni ni-bullet-list-67"></i>

Font Awesome¶

Used as a supplementary icon set for more specific icons. Loaded via CDN (v4.7.0).

Browse all available icons: Font Awesome 4.7 icon reference

<i class="fa fa-user"></i>
<i class="fa fa-search"></i>
<i class="fa fa-check"></i>

Usage in Navigation¶

Icons in the sidebar use the icon shape container:

<div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
  <i class="ni ni-planet text-primary text-sm opacity-10"></i>
</div>

Icon Sizing¶

Best Practices¶

• Self-host Nucleo Icons; Font Awesome is loaded via CDN
• Prefer Nucleo Icons for navigation and primary UI elements
• Use Font Awesome for specialized icons not available in Nucleo
• Add appropriate aria-label or aria-hidden="true" for accessibility
• Use consistent icon sizes within the same context