Icon
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 primary, success, danger, warning, info, the brand colors, and darkmode-ready contrast.
<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> <i class="hc-icon hc-icon--badge-check hc-icon--primary ml-12"></i> <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-icon--emerald"></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>
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.
| Icon | Class | Use |
|---|---|---|
| accessibility | accessible settings or options | |
| address-book | Lists of contacts, contact details | |
| adjustment | Settings or preferences | |
| archive | Closing or archiving objects | |
| area-chart | Reports, graphs that use an area or line chart | |
| arrow-down | Directing the user downward | |
| arrow-down-left | Directing the user down and to the left | |
| arrow-down-right | Directing the user down and to the right | |
| arrow-left | Going back in time, directing the user to the left | |
| arrow-right | Going forward in time, directing the user to the right | |
| arrow-up | Directing the user upward | |
| arrow-up-left | Directing the user up and to the left | |
| arrow-up-right | Directing the user up and to the right | |
| backpack | Collections of items, school, students | |
| badge-check | Verified content or accounts | |
| bar-chart | Reports, graphs that use a bar or column chart | |
| bell | Notifications default state (no unread) | |
| bell-active | Notification alert state (>0 unread) | |
| bell-off | Alternative notification alert state | |
| bin | Trash, deleted items | |
| book | Written resources, terms, library items | |
| book-open | Alternative to Book, resources, library | |
| bookmark | Saving an item | |
| brain | Mental health, knowledge | |
| building | Schools or organizations | |
| calendar | Events or calendars | |
| calendar-add | Creating an event | |
| chat | Chat message, create a chat | |
| chat-bubble | Generic chat symbol, indicates no history | |
| chat-translate | Translate chat text or transcript | |
| check | Success or completion | |
| check-circle | Alternative for success or completion | |
| checks | Messages or chats are read | |
| chevron-down | Group or select box expander | |
| chevron-left | Go back to the previous screen | |
| chevron-right | Proceed to a reduced list or view | |
| chevron-up | Group or select box retract | |
| clipboard | Forms or form requests inbox | |
| clipboard-check | Form approvals | |
| clipboard-paste | Submitted or completed forms | |
| clock | Time, alert, reminder, or duration | |
| close | Close modal or cancel | |
| collapse | Collapse a drawer or the left navigation | |
| collection | Library or other group of similar items | |
| component | Item or part of a larger group | |
| dashboard | Interface or report dashboards | |
| database | Data, databases, collections of information | |
| district | School districts, large organizations | |
| document | Generic documents | |
| document-copy | Copying a file or document, duplication | |
| document-text | Text documents | |
| download | Downloading a file or item | |
| download-cloud | Downloading a file or item from the cloud | |
| edit | editing an object or document | |
| emoji-disappointed | Disappointment, regret, empathy | |
| emoji-frown | Sadness, unhappiness | |
| emoji-meh | Disregard, aloofness | |
| emoji-smile | Happiness, agreement, success, approval | |
| erase | Remove or delete content or settings | |
| exclamation-circle | Warnings or alerts | |
| expand | Open a drawer or panel | |
| external-link | Links that take the user outside the app | |
| eye | Indicator that content can be seen | |
| eye-off | Indicator that content is hidden or private | |
| filter | Filter a list, filter options | |
| flask | Experimental features, labs | |
| globe | Language selection | |
| graduation-cap | Student or list of students | |
| grid | Dense data view or showing many items | |
| heart | Favorites or liking an item | |
| history | Going back in time, previous versions | |
| home | Dashboard, home | |
| info-circle | Additional information or a notice | |
| language | Localization, interface language settings or choices | |
| legal | Terms of service or terms and conditions | |
| lightbulb | New items, ideas | |
| link | Web link | |
| lock | Logged in, authenticated, secure | |
| lock-open | Logged out, unauthenticated, insecure | |
| log-in | Authenticating, logging in to a service | |
| log-out | Logging out or exiting a service or session | |
| Messages | ||
| mail-open | Alternative to messages, a read message | |
| mask | Boost masquerade function | |
| megaphone | Announcements or updates | |
| menu | Mobile menu buttons, justified text alignment | |
| message | Individual message | |
| messages | Discussion, conversation, multiple messages | |
| more | Opens additional menu items | |
| more-vertical | Alternative to more |
|
| mouse | External device, interaction requires a pointer | |
| newspaper | Newsletters | |
| page | Document or page | |
| paperclip | File attachments | |
| pause-circle | Pause, suspend | |
| pencil | Editing or make changes | |
| phone | Phone call, phone message | |
| pie-chart | Reports that include pie charts, generic reports | |
| pin | Location on a map, pin an item’s location | |
| play | Play a video, run a workflow | |
| plus | Creating or add items | |
| plus-circle | Alternative to plus | |
| pointer | Indicates item it clickable | |
| pointer-click | Indicates click event or action | |
| presentation | Classrooms, presentations, meetings | |
| printer | Print a document or object | |
| profile-card | User profile, details about a person, contact information | |
| question-circle | Problems, help information | |
| receipt | Generating reports or other documents | |
| refresh | Refresh, reload | |
| repeat | Recurring revents, repeat an action | |
| reply | Reply, respond to a message or action | |
| save | Save changes or save a new item | |
| scroll | Attendance, roll call, lists | |
| search | Search | |
| search-circle | Alternative to search with a better solid look | |
| send | Send a message or communication | |
| settings | Settings or preferences | |
| share | Share an item with someone else | |
| share-alt | Alternative for share using Android’s network style | |
| sort | Column or group is sortable | |
| sort-down | Column or group is sorted DESC | |
| sort-up | Column or group is sorted ASC | |
| star | Ratings, alternative to liking or favoriting an item | |
| stats | Statistics, report detailing stats | |
| support | Help, support | |
| swap | Exchange items | |
| tag | Labels, tags | |
| ticket | Support tickets | |
| trend-up | Activity, growth, improved performance | |
| trophy | Goals, awards | |
| undo | Undo an action, alternative to going backward | |
| upload-cloud | Uploading a file or item to the cloud | |
| user | User, profile page, account page | |
| user-circle | User profile | |
| user-group | Large groups or teams | |
| user-group-alt | Alternative where more visual height is needed | |
| users | Small teams, multiple users | |
| video | Videos, video camera | |
| warning-triangle | Alerts, notices |