Iconography
Icons
Snaqpaq icons should be used in a calculated matter to magnify comprehension and reduce thought when you need to focus on a particular action, command, or section. Do not use them if you’re unsure of the icon’s use, it’s probably not needed.
Our icons are deeply thought about with our brand and personality behind it, intended to create more functionality.
Icons should be used with essential text to support users path through the product in an accessible manner. Combining foreign icons with text could confuse users depending on how they recognized the supporting icon and the text label together. To make sure everything is compliant please keep in mind of the Web Content Accessibility Guidelines (WCAG) 2.1 AA standard color contrast ratio.
Icon shapes are from Font Awesome and they are used solid in weight.
Use the solid font weight for Font Awesome.
Use the light font weight for Font Awesome.
Avoid using icons for decoration or visual liking as it distracts from their intention elsewhere. Think about the surrounding context of icons too; if icons are crowded and not spaced well, it can lead to more visual noise and confusion.
Use a single icon for clarity.
Don’t use too many icons in UI to create visual noise.
We use Font Awesome icons that have options under it with a certain hover cover color behind it. When combined with this color there’s only one option we use to make sure everything is under ADA compliancy.
Use G10 for icons that have hovering as an option
Use any color besides G10 when hovering is an option
Icon sizes
Icons look best at 16x16, 48x48, 96x96 pixel size in the UI of LINQ products. Fluent UI administers these icons in Font Awesome where you can download the font from their website. You can change the font size based on our 8px grid.