Icons and visual symbols for clear communication and consistent user experience. This library combines PrimeIcons (font-based) and Lucide (SVG-based) into one searchable catalog. Click any icon to copy its usage snippet.
For content authoring, use the Icon Picker. It keeps the two libraries in separate tabs and stores a portable named value for QDS cards and other property-editor fields.
Load the stylesheet once, then use the pi class with any icon name.
<!-- Load once in <head> --> <link rel="stylesheet" href="https://cdn.q360.ai/assets/vendor/primeicons/primeicons.css"> <!-- Use anywhere --> <i class="pi pi-bell"></i> <i class="pi pi-check" style="font-size: 1.5rem"></i>
Load the script, add data-lucide attributes, then call createIcons().
<!-- Load once before </body> --> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> <!-- Use anywhere --> <i data-lucide="bell"></i> <i data-lucide="check" style="width:24px;height:24px"></i> <!-- Initialize --> <script>lucide.createIcons();</script>
PrimeIcons scale with font-size. Lucide SVGs scale with width / height.
<!-- PrimeIcons --> <i class="pi pi-star" style="font-size: 1rem"></i> <!-- 16px --> <i class="pi pi-star" style="font-size: 1.5rem"></i> <!-- 24px --> <i class="pi pi-star" style="font-size: 2rem"></i> <!-- 32px --> <!-- Lucide --> <i data-lucide="star" style="width:16px;height:16px"></i> <i data-lucide="star" style="width:24px;height:24px"></i> <i data-lucide="star" style="width:32px;height:32px"></i>
Decorative icons should be hidden from screen readers. Meaningful icons need a label.
<!-- Decorative — hidden from screen readers --> <i class="pi pi-star" aria-hidden="true"></i> <!-- Meaningful — add a visible or sr-only label --> <button aria-label="Add to favourites"> <i class="pi pi-star" aria-hidden="true"></i> </button> <!-- Or use the qds-icon-button component --> <qds-icon-button icon="pi-star" aria-label="Favourite"></qds-icon-button>
Loading icons…