Switch to M&TIconography
Icons are symbols that represent concepts, objects or actions, and have semantic purpose within a layout. A useful icon complements a text label to communicate a single meaning. Icons should always be recognizable, functional and easily understood.
Attributes
Size
Icon size should be consistent throughout the layout to maintain visual hierarchy and ensure scannability. Icons should also be proportionate to the size of any accompanying text, so keep the pixel size of font in mind when pairing icons. Design icons at the 24x24 px (small) size and allow resizing in 1.5 or 2x increments to ensure smooth scaling and to maintain clarity.
Icons may be placed in square or circular frames to grant more prominence. To scale frames beyond the defined sizes below, the frame should maintain a width 1.33x greater than the icon.
| Size | Icon Dimension | CONTAINER DIMENSION (SQ. OR DIA.) |
|---|---|---|
| XS | 16x16px | 21.33px |
| S | 24x24px | 32px |
| M | 32x32px | 42.66px |
| L | 48x48px | 64px |
| XL | 64x64px | 85.33px |
Clarity
Icons should always be placed precisely on-pixel, where the x and y coordinates are whole numbers, to avoid distortion.
Styles
Filled vs Outlined
Wilmington Trust mainly uses outlined icons to achieve a clean and simple layout that prioritizes the content on the page. However, consider accessibility when choosing a filled vs outlined icon. A small filled icon will be more easily perceived than a small outlined icon. Additionally, semantic context can change when using a filled or outlined version of the same icon. For instance, a filled icon could indicate that something has been selected or that an option is "on".
The stroke weight of all outline icons should always be 1px and will not change as the icon scales. The stroke weight of filled icons will scale proportionally as the icon changes size.
Color
Icons in the library are presented in the Primary Base color. Stick to Primary or Secondary Base, depending on context, unless otherwise necessary to visually reinforce the associated text content, e.g., an error icon should use Red Base. Icon color may also need to change to ensure sufficient color contrast to meet accessibility standards.
Set the color of filled icons by altering the Fill override. Set the color of outlines by altering the Stroke override.
Accessibility
For a seamless experience, include a text label within the page layout alongside an icon. Interactive icons should be labeled by the action they offer. Illustrative icons should reinforce existing text and should not include a label where it will create redundancy. For example, repeated icons in a table column can be labeled on-screen by that column's header instead of cluttering the design by repeating the label in each row.
If space constraints make it impossible to include a label on-screen and the design cannot be amended to accommodate a label, the Icon Tooltip variant of the Tooltip may be used. Do not use icons that do not have an easily recognized semantic purpose without an on-screen label. A label's placement in relation to the icon is up to the designer's discretion but should give prominence to any associated actions.
