Icons

Learn about icons, and how to best use them in the Base System

1.0 Icons

Icons are graphical symbols that represent actions, objects, or ideas. They are crucial for enhancing the user interface by providing visual cues that help users quickly understand functionality. In the Base System, icons are designed to be scalable, accessible, and customizable, ensuring they can be seamlessly integrated into various components and layouts.

Explore the default icon classes and properties below, or learn more about how icons are used in your layouts through the design overview page.

2.0 Icon Classes

Icons come with predefined styles that make them easy to implement and ensure consistency throughout your project. The table below details the default icon classes and their associated properties. You can adjust these classes or create custom ones to fit your specific design needs.

Class NameSizeColor

Icon X Small

16px

#00000

Icon Small

20px

#00000

Icon Regular

24px

#00000

Icon Large

28px

#00000

Icon X Large

32px

#00000

Icon {Custom}

X

X

3.0 General Usage

3.1 Element Type

Generally, we recommend using an embed block and SVG based icons. Using SVG icons provides a number of benefits that most designers will be familiar with, additionally it provides the following development benefits:

  • Interactable in the designer: By using an SVG embed icon, users can quickly change colors of icons and add hover effects by using fill="currentColor", .

  • Doesn't add asset into users project: This

  • Faster Solution: Save time exporting and uploading images as it is easier to copy the svg code

However, If an icon has a shadow which is not handled well by SVG then we will use an image.

3.2 Class Naming

Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

  • Default Sections: Default sections use descriptive names based on the amount of padding

    • Example: Section Large, Section Small, Section X Small

  • Custom Sections: Use section as a suffix to the parent category, can use any styles

    • Example: Testmonial Section, Pricing Section

PreviousBadgesNextForm

Last updated