Menu Icons in Joomla
Menu icons have been a core part of the Joomla experience since version 4.1, and with Joomla 5 now firmly established as the current release, the feature is more polished and widely supported than ever. Adding icons to your navigation is one of the quickest ways to give a site a more professional, modern feel.
Icons from Bootstrap Icons, Font Awesome, or any icon font bundled with your template can be used — and with the icon ecosystem having matured considerably, you have more choice than ever.
TL:DR – Add icons to your Joomla menus in seconds, with no extensions or custom code required.
Contents
How Menu Icons Work in Joomla
Joomla stores the icon class string directly on the menu item itself, inside the Link Type tab. When the page renders, Joomla outputs that class on an <i> or <span> element adjacent to the menu label, and the icon font does the rest. Because this is a native field — not a module parameter or a template override — it works consistently across Joomla 4.x and 5.x sites regardless of which template you are running, provided that template loads an icon font.
Cassiopeia, Joomla's default front-end template, ships with Bootstrap Icons included, so no additional setup is needed on a stock installation. Third-party templates from developers such as Helix Ultimate, YOOtheme, and Astroid typically bundle Font Awesome or their own icon set, so check your template documentation to confirm which class prefix to use.
Adding an Icon to a Joomla Menu Item
- Open the menu item in the Joomla Administrator backend.
- Click the Link Type tab.
- In the Link Icon Class field, enter the icon classes for your chosen icon font. For example, using Bootstrap Icons for a home icon:
bi bi-house-fill. For Font Awesome 6, the equivalent would befa-solid fa-house. - Save the menu item and check the front end.
- That's it — no template overrides, no custom CSS, no extensions.
The Result on the Front End
Once saved, the icon appears inline with the menu label in the navigation bar. With Cassiopeia's default styling, the icon sits neatly to the left of the text and scales correctly at all viewport sizes. Most modern third-party templates handle this equally well, since icon font rendering has become a standard front-end concern.
Choosing the Right Icon Font
The two most common choices in the Joomla ecosystem right now are Bootstrap Icons and Font Awesome 6. Bootstrap Icons is the safer default if you are running Cassiopeia or a Bootstrap-based template, since it is already loaded — adding another icon font purely for menus would be an unnecessary page-weight cost. Font Awesome 6 Free remains extremely popular with commercial templates and offers a broader glyph set, though its free tier is more limited than the Pro version.
If you are using a page builder such as YOOtheme Pro, you may also have access to UIkit icons or a curated custom set — check the builder's icon picker, which can often generate the correct class string for you automatically, removing any guesswork.
It is worth auditing which icon fonts your template is already loading before adding a new one. Browser developer tools make this straightforward: look at the network panel on a front-end page and filter by font or CSS to see what is already present. Keeping icon font requests to a minimum keeps your Core Web Vitals scores healthy — something that matters more than ever given Google's ongoing emphasis on page experience signals.
Icons in Mobile Navigation
One area worth testing carefully is the collapsed mobile menu. Depending on how your template renders the hamburger or off-canvas navigation, icon classes may or may not be output in the mobile view. Cassiopeia renders them consistently across breakpoints, but some third-party templates suppress the icon element in the mobile drawer to save space. A quick check on a real device — or in your browser's responsive mode — will confirm the behaviour before you go live.
Quick Reference: Common Icon Class Formats
- Bootstrap Icons 1.x–2.x:
bi bi-[icon-name]— e.g.bi bi-house-fill,bi bi-envelope - Font Awesome 6 Free (solid):
fa-solid fa-[icon-name]— e.g.fa-solid fa-house,fa-solid fa-envelope - Font Awesome 5 (legacy, still common):
fas fa-[icon-name]— e.g.fas fa-home - UIkit (YOOtheme):
uk-icon-[icon-name]— check your builder's icon picker for the exact string
When in doubt, use the icon library's own search tool — Bootstrap Icons and Font Awesome both have searchable online libraries where you can copy the class string directly.
