Icons

Component

The design pattern behind the use of these icons plays a key role in ensuring consistency and usability across the interface

Join the waitlist

Get notified when we're launching.

Variants

An icon is a visual symbol or representation that conveys a specific meaning, concept, or action. In the context of digital interfaces, such as mobile applications and websites, icons are typically small, stylized symbols used to represent functions, features, or content.

Design Pattern

Just having visually pleasing icons isn't enough. The design pattern behind these icons ensures consistency and usability across the interface. These patterns include:

  1. Dependencies: Ideal icons should support the overall design language of your digital interface. Choosing the icon library is, therefore, a critical step. It sets the tone for the art direction of the design. You can opt for an open-source library, go for a paid one, or create your own bespoke icon set based on your business needs and design aesthetics. We typically start with FontAwesome as it has one of the largest icon sets, especially if you opt-in to a paid license.
  2. Themes: Creating a unified theme for your icons is vital for maintaining color consistency across your interface. A well-thought-out color scheme makes the interface intuitive for your user, introducing visual harmony and balance. Plus, it adds to your developers' efficiency, providing definite color usage guidelines.
  3. Sizing: The size of an icon is a crucial aspect of its design. Typically, most icon libraries are built with low details, meaning sizing them up might distort their aesthetics. Conversely, highly detailed icons lose their intricacy when scaled down. Therefore, it's essential to find a balance and standardize the sizing.

Summary

Implementing the icon component is a strategic decision to standardize how icons are used throughout the application. Starting with an open-source library, switching to a paid one, or implementing your own becomes more accessible with an icon component. Plus, it ensures design consistency by setting up themes and sizing variants.

Themes

The color theme reflects the brand's identity and enhances the overall user experience through visual coherency. For more information check out the themes page.

Sizes

This UI Kit primarily uses the FontAwesome5 icon set. Given the detailed nature of these icons, the current sizing implementation prioritizes dimensions of the parent object, ensuring that the icons are never overscaled and their intricate aesthetics maintained.

Others

FontAwesome5 has a few options to leverage their extensive set of icons. This demonstrates the ability to customize the icon component to meet the needs of the icon library.

Custom

While it's crucial to standardize the variants of an icon component for consistency, it's equally important to offer the flexibility for customization to meet specific content or design requisites. The ability to customize ensures the icon component appropriately aligns with and reinforces the overall design aesthetics.