[{"data":1,"prerenderedAt":115},["ShallowReactive",2],{"blog":3},[4],{"id":5,"title":6,"body":7,"date":100,"description":101,"draft":102,"extension":103,"meta":104,"navigation":105,"path":106,"seo":107,"stem":108,"tags":109,"__hash__":114},"blog\u002Fblog\u002Ficon-fonts.md","Icon fonts considered harmful",{"type":8,"value":9,"toc":92},"minimark",[10,14,34,37,42,45,48,51,54,58,61,66,69,72,75],[11,12,13],"p",{},"Icon fonts have been a popular way to display icons in web applications for many years. They allow developers to use a single font file to display a wide range of icons, which, at first glance, seems like a convenient solution.",[11,15,16,17,24,25,33],{},"My journey with icon fonts started when I was working on ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fphotonvision.org",[22],"nofollow","PhotonVision",", an open-source vision processing software for robotics. We used an icon font, specifically ",[18,26,29],{"href":27,"rel":28},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mdi\u002Ffont",[22],[30,31,32],"code",{},"@mdi\u002Ffont"," to display various icons in the user interface, and it worked well for a while. However, when doing some maintenance and trying to get bundle sizes down, I realized that icon fonts were causing more problems than they were solving.",[11,35,36],{},"An icon font is essentially a font where each character corresponds to an icon. This means that when you use an icon font, you're actually using text to display your icons. While this can be convenient, it also introduces several issues.",[38,39,41],"h3",{"id":40},"bundle-size","Bundle size",[11,43,44],{},"Icon fonts are great because you can include one file and use it to displan an entire library worth of icons. This can be quite convenient, but it doesn't actually match how people use icons.",[46,47],"icon-explorer",{},[11,49,50],{},"Icon fonts can significantly increase the size of your web application bundle. Each icon font file can be hundreds of kilobytes to several megabytes in size, and if you're using multiple icon fonts, this can quickly add up.",[11,52,53],{},"Because they're fonts, they are unable to be tree-shaken, meaning that even if you only use a few icons from a font, or even a hundred icons, the entire font file will still be included in your bundle. You're likely only using a small fraction of the icons in the font, but you're still using the bundle size of the entire file.",[38,55,57],{"id":56},"accessibility","Accessibility",[11,59,60],{},"Icon fonts can be problematic for accessibility. Screen readers often interpret the icons incorrectly, since they look like text to them. This can lead to confusion for users who rely on these assistive technologies. In addition, some assistive tools forcibly override the font, which can result in icons being displayed as text or not at all. This can make it difficult for users to understand the content of your application.",[62,63,65],"h2",{"id":64},"what-should-i-use-instead","What should I use instead?",[11,67,68],{},"SVGs (Scalable Vector Graphics) are a better alternative to icon fonts. They also have better accessibility support, as they can be given descriptive titles and roles that assistive technologies can interpret correctly. By default, SVGs have the semantic meaning of an image- which is what they are- and can be styled with CSS, allowing for more flexibility in how they are displayed.",[11,70,71],{},"SVGs also support multiple colors, which means you can have cool duotone icons without needing to use multiple icon fonts. They can also be styled with CSS, allowing for more flexibility in how they are displayed.",[11,73,74],{},"Best of all, they can be trivially tree-shaken. You can import only the icons you need, and the rest will be excluded from your bundle. This can significantly reduce the size of your application, especially if you're using a large icon library.",[11,76,77,78,85,86,91],{},"If you still want the convienence of \"just using\" icons without having to import them, I reccomend ",[18,79,82],{"href":80,"rel":81},"https:\u002F\u002Fgithub.com\u002Funplugin\u002Funplugin-icons",[22],[30,83,84],{},"unplugin-icons","- it allows you to use icons from the great ",[18,87,90],{"href":88,"rel":89},"https:\u002F\u002Ficonify.design\u002F",[22],"Iconify"," project, which has thousands of icons from many different icon sets, and it will automatically tree-shake the icons you don't use.",{"title":93,"searchDepth":94,"depth":94,"links":95},"",2,[96,98,99],{"id":40,"depth":97,"text":41},3,{"id":56,"depth":97,"text":57},{"id":64,"depth":94,"text":65},"2026-10-23","Why you should use SVGs instead of icon fonts.",false,"md",{},true,"\u002Fblog\u002Ficon-fonts",{"title":6,"description":101},"blog\u002Ficon-fonts",[110,111,112,113],"icons","icon fonts","SVG","open-source","IHntADbObOKHnE6b-zWhK9fJp54JWceGQNuR5mBYs-k",1792905765630]