Icon Figma Code Connected

Honeycomb’s icon library consists of a growing set of icons in both outline and solid variations. Each outline icon has a 1.5px stroke width, while the solid icons are all fill.

There are 2 fonts to import, located in ./dist/fonts, for both variations and they work the exact same way as all other font-based icon libraries. Simply add .hc-icon--solid (or just make the element bold!) to get the solid variation.

Using icons

You can create an icon in one of two ways, both of which use an <i> element. The first leverages the element’s ::before pseudo-element; the second requires the icon’s name inside the <i> and displays the corresponding glyph using its ligature.

Default class-based approach

Icons require an <i> element with the .hc-icon class and then the symbol’s class name, like .hc-icon--book. You can control the size, color, and style of icons with a standard set of classes in this same syntax.

<i class="hc-icon hc-icon--address-book"></i>
<i class="hc-icon hc-icon--adjustment">Adjustment</i>

Text inside the element is not recommended and will be hidden from view, but remains available for screen readers or as default/placeholder text in the event the stylesheet fails to load.

Ligature approach

You can alternatively display icons using the glyphs’ ligatures. Each icon in the font files has their name as a ligature; both dashes and underscores are supported in place of spaces. Use the class .hc-icon-glyph and include the icon’s name as the sole content inside the <i> element.

<i class="hc-icon-glyph">language</i>
<i class="hc-icon-glyph">chat-translate</i>
<i class="hc-icon-glyph">download_cloud</i>

Note that these icons are selectable and when copied the full name will be copied. Before the font is loaded, there may be a brief moment where the name is displayed in browser as well.

Color and size

Change the icon’s color and size with modifier classes. The default size is 24px, and you can resize them to 12, 16, 20, or 32. Available colors include success, danger, warning, info, the brand colors via .hc-is--brand and the body theme, and darkmode-ready contrast.

<div class="flex flex-row items-center gap-1 md:mr-12">
  <i class="hc-icon hc-icon--archive hc-icon--12"></i>
  <i class="hc-icon hc-icon--archive hc-icon--16"></i>
  <i class="hc-icon hc-icon--archive hc-icon--20"></i>
  <i class="hc-icon hc-icon--archive"></i>
  <i class="hc-icon hc-icon--archive hc-icon--32"></i>
</div>
<div class="flex flex-row items-center gap-1">
  <i class="hc-icon hc-icon--badge-check hc-icon--success"></i>
  <i class="hc-icon hc-icon--badge-check hc-icon--warning"></i>
  <i class="hc-icon hc-icon--badge-check hc-icon--info"></i>
  <i class="hc-icon hc-icon--badge-check hc-icon--danger"></i>
  <i class="hc-icon hc-icon--badge-check hc-is--brand"></i>
  <span class="bg-gray-900 dark:bg-white w-8 h-8 grid place-content-center rounded">
    <i class="hc-icon hc-icon--badge-check hc-icon--contrast"></i>
  </span>
</div>

Solid variations

Create a solid version of any icon by making the element’s text bold, or using the utility class .hc-icon--solid. The solids are imported with a second font file and use the same font name, Honeycomb, just with a 700 weight.

<i class="hc-icon hc-icon--archive hc-icon--solid"></i>
<i class="hc-icon hc-icon--address-book font-bold"></i>

Icon reference

The following table lists all icons available in Honeycomb, with a brief use-case description.