Use the documented stylesheet entry
The official guide shows the CSS import @import 'lucide-static/font/lucide.css'; for Vite. It also documents a CDN stylesheet at https://unpkg.com/lucide-static@latest/font/lucide.css. Use the workflow appropriate to your project rather than adding both.
For a maintained deployment, choose an explicit package version and keep its assets together. An unversioned latest dependency can change independently of your own release.
Select the intended icon class
After loading the stylesheet, use the icon class provided by that release. The guide’s current CSS example uses icon-house. Consult the installed stylesheet when a name from an older example does not produce the expected icon.
An empty box can have several causes. Inspect the stylesheet request, its referenced font requests and the element’s computed styles before changing unrelated page typography.
Preserve the supporting font resources
When hosting the stylesheet yourself, keep the referenced font asset paths valid. Moving only a CSS file can break relative URLs even though the stylesheet itself loads. A successful CSS response alone does not show that the glyph resource arrived.
Check whether another rule overrides the element’s font family. An icon class rendered in an ordinary reading font cannot produce the intended icon mapping.
Choose an appropriate integration
Lucide notes that the icon font includes its entire icon collection and recommends framework packages with tree-shaking for high-traffic production use. For a project using a few icons, compare that option before loading the complete font.
Keep a meaningful text label for an icon-only control. The symbol’s appearance does not tell every reader what an action does. Read font file types and the CSS font-size guide for related concepts.
Your questions, answered.
Does importing lucide.css change my body text font?
It supplies an icon-font resource and related classes. It is not a replacement paragraph typeface.
Why can CSS load while an icon is missing?
The referenced font file can fail separately, an icon class can differ between releases, or another style can override the required font. Inspect those parts independently.
Should I use the icon font for every production website?
Choose based on your integration and asset requirements. Lucide recommends tree-shaken framework packages for production rather than loading all icons through the complete font.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.