Icons

Overview

Icons play a crucial role in enhancing visual communication and improving user experience in digital interfaces. In the FAO Design System, we utilize the Bootstrap Icons library, a comprehensive and versatile collection of open-source icons.

Bootstrap Icons offers several advantages:

• Extensive collection: With over 2,000 icons, it covers a wide range of use cases.
• Consistent style: All icons follow a cohesive design language, ensuring visual harmony across your interface.
• Scalability: Being vector-based, these icons can be resized without loss of quality.
• Easy implementation: The icons can be easily integrated using CSS classes or as individual SVG files.
• Regular updates: The library is actively maintained, with new icons added periodically.

By leveraging Bootstrap Icons, we ensure that FAO's digital products have access to a rich set of visual elements that can effectively convey meaning, guide users, and enhance the overall aesthetic of our interfaces.

Usage

To use Bootstrap Icons in your FAO project, follow these steps:

1. Use the appropriate class name for the desired icon, prefixed with "bi-". For example, <i class="bi-alarm"></i> will display an alarm icon.
2. Icons can be customized using additional CSS classes or inline styles to adjust size, color, and other properties.
3. For accessibility, consider adding appropriate aria labels or hidden text for screen readers when using icons to convey meaning.

Refer to the Bootstrap Icons documentation for a complete list of available icons and additional usage guidelines.

Icons used in CSS styles

The following icons are used in CSS styles throughout the FAO Design System. This section serves as a reference to keep track of the icons used, in case the icon codes change in future updates of the Bootstrap Icons library.

Note: This list may not be exhaustive and should be updated as new icons are added or existing ones are modified in the CSS styles.