Metronic 8.3.3 Bootstrap Icons Issue with Laravel
Hello Support,
I am using Metronic 8.3.3 (Bootstrap version) with Laravel, and I am experiencing a major issue with the KeenIcons system.
Problem Description
Many icons are not being displayed. While some icons render correctly, a large number of them do not appear at all. In several cases, an icon is displayed, but it is not the exact icon requested.
Examples include:
ki-duotone ki-black-left-line
ki-duotone ki-black-right
ki-duotone ki-calendar-8
ki-duotone ki-dots-square
and many other KeenIcons.
These either:
Do not render at all.
Render as blank space.
Display a completely different icon than the one specified.
What I Have Already Checked
Installed Metronic 8.3.3 Bootstrap correctly.
Integrated it with Laravel.
Verified that all Metronic CSS, JavaScript, fonts, and assets are loaded.
Confirmed that the icon class names match the official documentation.
Cleared Laravel caches (optimize:clear).
Rebuilt frontend assets (npm run build).
Cleared browser cache and tested in multiple browsers.
Verified that some icons work correctly, while many others do not.
Expected Behavior
Every KeenIcon documented for Metronic 8.3.3 should render correctly when using its documented CSS classes in a Laravel application.
Actual Behavior
Many icons are missing.
Some icon classes display the wrong icon.
The issue affects a significant portion of the KeenIcons library, making it difficult to use the UI as documented.
Environment
Metronic Version: 8.3.3
Demo: Bootstrap
Framework: Laravel
Bootstrap: 5.x
Node.js: Latest LTS
Browser: Tested in multiple browsers
Operating System: macOS
Questions
Could you please help clarify the following?
- Is this a known issue in Metronic 8.3.3? 2. Is there an updated KeenIcons package, font, or asset that must be installed separately when using Laravel? 3. Are there any additional Laravel-specific installation steps required for KeenIcons? 4. Are some icon names in the documentation outdated or no longer supported? 5. Is there a patch or newer version that resolves this issue?
Your assistance would be greatly appreciated, as this issue is affecting a large number of icons throughout the application.
Thank you.
Replies (1)
Hi there,
Understanding
You're using Metronic 8.3.3 (Bootstrap) with Laravel and many KeenIcons are not rendering — some show blank space, others display the wrong icon. You've verified assets are loaded and class names match the docs.
Solution
Yes, this is a known issue in Metronic 8.3.3. There are two distinct KeenIcons bugs affecting v8:
1. Missing icons from the CSS bundle (build pipeline bug)
As of our latest audit, 31 icons documented on the KeenIcons page are missing from plugins.bundle.css entirely — no CSS rule exists for them at all. This is a build pipeline issue where the icon font generation step doesn't include all documented icon definitions.
Some of the icons you mentioned (like ki-black-left-line, ki-black-right, ki-calendar-8) may fall into this category. The full list of confirmed missing icons includes names like ki-gear, ki-send, ki-triangle, ki-faceid, and others.
2. Naming mismatch bug (3 icons)
Three specific icons have a class name mismatch between the docs/HTML and the CSS bundle:
| Documented class | CSS class in bundle |
|---|---|
| ki-plus-square | ki-plus-squared |
| ki-minus-square | ki-minus-squared |
| ki-check-square | ki-check-squared |
These render as invisible 0x0 elements because the CSS rule expects the "d" suffix. If you use any of these, add a "d" to the class name.
Regarding your questions:
- Is this a known issue? — Yes, both bugs above are confirmed in 8.3.3.
- Updated KeenIcons package? — No separate installation is needed. KeenIcons are bundled inside
plugins.bundle.cssand the font files inassets/plugins/global/. There is no standalone KeenIcons package to download. - Laravel-specific steps? — No. The KeenIcons assets are part of the standard Metronic assets. As long as
plugins.bundle.cssand the keenicons font files are correctly copied to your Laravelpublic/directory and loaded in your layout, they should work. The Laravel integration does not require any special KeenIcons configuration. - Outdated icon names? — Some icons listed in the docs may indeed have outdated or incorrect names that don't match the CSS bundle. The 31 missing icons are evidence of this.
- Patch or newer version? — We have escalated this to our development team. A fix would require updating the KeenIcons build pipeline to include all documented icons. I don't have a timeline for when this will be resolved.
Workaround for now:
You can check whether a specific icon exists in your plugins.bundle.css file by searching for its class name. If it's not there, that icon is affected by the build pipeline bug and there is no workaround other than using a different icon that is available.
Sources
Next Steps
If you need a specific icon that's missing and can't be substituted, please let us know which icons are critical for your project — we'll prioritize those for the fix.
This reply was generated by AI. A human will follow up if needed.
