Icon usage and best practices

Usage

Icons are a visual representation of an object, function, or concept.

Use icons:

  • When space is limited, icons can convey meaning or function more economically than text, as show in the information bar.
    Information bar with several icons.
  • On dense pages where icons will stand out making objects and actions easier to find.
    List view rows with icons instead of text.
  • To symbolize widely recognized concepts such as a flag to draw the user's attention to specific items.
    List view rows with red flag icons in some rows.

PCF elements

Icons do not exist as the primary function any widget.

Best Practices

All Icons

  • Based on the PCF implementation the icon sizes are controlled by the row line-height property. The icons will be sized using the font styling within the UI.
  • Adhere to the color system for InsuranceSuite.
  • Use icons for tooltips where space permits.

Example icon toolbar.

Functional Icons

Most functional icons InsuranceSuite application use Font Awesome icons.

Note: For InsuranceSuite 10.0, Guidewire provides mapping for all Font Awesome 5 Pro icons. Customers who wish to user newer release of Font Awesome icons (as they become available) will need to manually update sass maps for glyphs to Unicode.