Icon-fonts removal
Background
As part of our ongoing efforts to improve the Honeycomb design system, we have decided to stop providing icon-fonts. Starting from version 11.0.0, Honeycomb icon libraries no longer include icon-fonts.
The key reasons for this decision are the following problems with icon-fonts:
- Accessibility: Icon-fonts can pose significant accessibility challenges, specially when many of them are used in the same page. Screen readers may not interpret icons correctly, leading to a poor experience for users who rely on assistive technologies.
- Performance: Loading icon-fonts can negatively impact performance, especially on mobile devices. You need to load all icons at all times, even if you only need a handful of them.
- Visual Consistency: Icon-fonts use “hacky” styles to align them properly, which sometimes do not render consistently across different browsers and devices.
- Limited Scalability: Unlike SVGs, icon-fonts do not scale well, which can result in pixelation when resized.
Alternatives
Honeycomb provides equally functional replacement options for React and other web environments and tech stacks. The guides and code examples bellow will help you easily migrate to a different library and continue using honeycomb icons in your project.
Honeycomb Icons - Web Components
Honeycomb Icons Web components serves icon assets as Stencil based web components. This means these icons can be used in any web environment supporting HTML and web components technology. This makes them super versatile and flexible.
In order to use these icons, first include the library from the CDN:
<script type="module" src="https://honeycomb-icons.hive.flixbus.com/11.0.0/flix-icons/flix-icons.esm.js"></script>
<script type="nomodule" src="https://honeycomb-icons.hive.flixbus.com/11.0.0/flix-icons/flix-icons.js"></script>Then simply replace your icon-font icons with their equivalent replacements as described in examples bellow:
Specifying the icon name
<i class="flix-icon flix-icon-account-attention-solid"></i><flix-icon name="account-attention" solid></flix-icon>Setting the size of an icon
<i class="flix-icon flix-icon-account-attention-solid flix-icon--size-4"></i><flix-icon name="account-attention" solid size="4"></flix-icon>Specifying color variations
<i class="flix-icon flix-icon-star-solid flix-icon--primary"></i>
<i class="flix-icon flix-icon-star-solid flix-icon--secondary"></i><flix-icon name="star" solid color="primary"></flix-icon>
<flix-icon name="star" solid color="secondary"></flix-icon>Honeycomb Icons - React
For React based project we highly recommend using our dedicated Honeycomb Icons React library.
To add it to your project just run npm i @flixbus/honeycomb-icons-react@latest --save.
You can easily replace icon fonts with that library now. Just follow the examples bellow.
Specifying the icon name
<i class="flix-icon flix-icon-account-attention-solid"></i><Icon InlineIcon={IconAttentionSolid} />Setting the size of an icon
<i class="flix-icon flix-icon-account-attention-solid flix-icon--size-4"></i><Icon InlineIcon={IconAttentionSolid} size='4' />Specifying color variations
<i class="flix-icon flix-icon-star-solid flix-icon--primary"></i>
<i class="flix-icon flix-icon-star-solid flix-icon--secondary"></i><Icon InlineIcon={IconAttentionSolid} appearance="primary" />
<Icon InlineIcon={IconAttentionSolid} appearance="secondary" />