Font bundling for HTML

Currently, icons are bundled as svg files that are inserted by JavaScript in the <i> tag.

As far as I understand, majority of icon packs for web are bundled as fonts instead. This allows them to be seamlessly integrated into different text styles (primarily by matching font size and color).

Lucide-preview.html seems to be doing exactly this. However, there is not documentation on how to use this approach in real web apps.

Thanks!

[ericfennis]

I understand you questions. But I can tell you why we not recommend using icon fonts for web development. There is a reason why icon fonts are still really popular and that’s because icon fonts were there first. Svgs were for long time not supported on every browser so icon fonts was the solution. But nowadays svgs are supported everywhere. The reason why people still use it, i don’t know. maybe it is easier. But there are a lot of good reasons why you should not use icon fonts:

1. You always include everything

If you use the lucide Icon font, you include all the 500+ icons, but you maybe use between 0 - 50 icons in you website (depends on you project). So that’s not very efficient in loading. A lucide icon font file is somewhere between 60-120kb depends on the fontfile type. And you maybe want to load the additional css file for css classes, that’s extra 36kb. And you also add 2 extra http request to you website to have the icons instead of loading one javascript file.

Javascript library

The javascript library is currently on 25kb gzipped if you use all the 500+ icons, (also not ideal).

But where the magic happens with the lucide Javascript library (or the other official lucide packages) if you use bunders like Webpack, rollup or something else that supports Threeshaking. You can bundle only the icons you use.

Here is an example of using the three-shaking ability of the lucide javascript package:

import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe,
  },
});

An here you can see the rollup vizualizer that we only include the three icons. Added only 5kb (not gzipped): The bundled javascript of the whole site only 1.2 kb gzipped:

The lucide library also doesn’t require an additional css file. If bundle it with you other javascript you don’t add an extra request to you payload.

More about threeshaking: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking

2. Icon fonts are not very good for accessibility

• Because icon fonts are threaded as text, screen readers try to read these as well. lead to unexpected behaviour and annoying experience for the people who need this.
• Stylesheet/font overrides, some users uses their own font to make site more readable for them selfs (Like dislexic people https://opendyslexic.org/), icon font will replaced as wel. Make the icons disappear.

3. Styling icons

Maybe you like to have icons seamlessly integrated with for example fonts-size. But styling icons can be a pain in the ass if you don’t want depend on the styling of the text. For Example simply aligning the icon in the middle of the line requires the use of font-size, letter-spacing, line-height. make it really hard constantly overriding the styling of the text make it look good.

All the lucide icons are shipped with the stroke="currentColor" attribute in the svg element. That means that the svg icon will always have the color bases on the font color that is used.

You can scale icons based on font size by simply using ‘ems’:

svg.lucide {
  width: 1em;
  height: 1em;
}

Here nice article about aligning/scaling svgs with text: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4

4. Unexpected rendering of icons by using fonts

Svgs are rendered as vectors on screen, make it look more sharper on screen then icon fonts (especially hdpi screens, like retina ) Icons fonts are threaded like text and gets extra processing to make the “text” more readable:

Close up

Glyps can be rendered weirdly, misplaced and not well alligned.

Extra articles about Font vs SVG.

• Icon Fonts vs SVG – Clash of the Icons
• Stop Using Icon Fonts
• CSSTricks, Inline SVG vs Icon Fonts [CAGEMATCH]
• Seriously, Don’t Use Icon Fonts

[ericfennis]

@marchellodev My pleasure!