Overview
Icons may be used in various places throughout fluid applications. This documentation discusses the use of icons and specifications for their use. Note that all fluid icons are created in the Scalable Vector Graphics (SVG) format.
Icon Usage
Whether or not an icon should be used will depend largely on where it will be used. Icons may be actionable (hotspots)—clicking or tapping on such icons will perform some action, or may be purely visual for the purpose of drawing attention.
The style, color, and size of an icon will depend on its use and the form factor on which it will be rendered. In some instances, a specific icon size may be used in a form factor, but the size will automatically scale up or down for different form factors.
This section describes the use of icons in the following parts of a fluid application:
- Banner
- Home Page Tile
- Navigation Bar
- Left Panel
- Detailed Content
- Button
Icons in a Banner
The highlighted icons in the following example show the icons used in a banner. Banner icons are PeopleTools images and they are actionable buttons.
Specifications
Color: White
Size: 25x25 pixels
Type: Flat
![banner icons](images/icons/image001.png)
Icons in a Home Page Tile
In general, Homepage tile icons are not hotspots. Use a single icon in a Homepage tile when there is minimal or no live data to be displayed. Refer to the Homepage Tiles Standards for details about when the icon can be a hotspot.
Specifications
If an icon is used in a Homepage tile, the following format should be used for the icon:
Color: Multi-colored
Size: 80x80 pixels for non-small form factor. It will be scaled to 48x48 pixels for the small form factor. (When requesting a new icon, request 80x80 pixels.)
Type: Flat
Example
![page tile icons](images/icons/image003.png)
Icons in a Navigation Bar
Icons used in the navigation bar (NavBar) are not hotspots. The same icon used for the corresponding application tile should be used for the NavBar. Use the default static image for the tile when the tile itself does not show the image but displays live data. However, it should be a smaller size: 48x48 pixels.
Specifications
Color: Multi-colored
Size: 80x80 pixels for non-small form factor. It will be scaled to 48x48 pixels for the small form factor. (When requesting a new icon, request 80x80 pixels.)
Type: Flat
Example
![navbar icons](images/icons/image005.png)
Icons in a Left Panel
Icons used in the left panel are not hotspots. For guidelines about using icons in the left panel, see the Panel Layout Standards , Left Panel Icons and Counts section.
Specifications
Color: Multi-colored
Size: 24x24 pixels on small form factor. It will scale down to 20x20 pixels on non-small form factors because of padding in the left panel. (When requesting a new icon, request 24x24 pixels.)
Type: Flat
Example
![icons in left panel](images/icons/image008.png)
Icons in Detailed Content
This section discusses icons in the content area and application header as well as actionable icons and provides examples.
Content Area and Application Header
Important elements in a content area or an application header can be called out using icons. These icons are not hotspots. As a general rule, these icons should be followed with text that explains the meaning of the icon.
Specifications
Color: Monotone gray unless the information is urgent or needs immediate user attention; in this case, use a colored icon.
Size: 16x16 pixels
Type: Flat
Actionable or hotspot icons may be used on a transaction page.
Any icons that are not part of a button but are actionable or tappable should be colored and should have a 3D look. These icons do not need to be followed by text that explains the meaning of the icon.
Specifications
Color: Colored
Size: 16x16 pixels
Type: 3D
This example shows icons on a page:
![icon with explanatory text (pending) on a page](images/icons/image010.png)
This example shows icons in the content panel of a two-panel layout:
![icons in content panel of page](images/icons/image013.png)
This example shows an icon in the application header:
![icon in application header of page](images/icons/image016.png)
This example shows a red warning icon on a detail content page that draws attention to urgent or important information:
![warning icon detail content page](images/icons/image018.png)
This example shows an actionable 3D icon for Related Actions:
![actionable icon for related actions](images/icons/image021.jpg)
This example shows NavBar icons and an actionable Related Actions icon:
![navbar and related actions icons](images/icons/image023.png)
This example shows a hotspot (3D Information icon) that when tapped brings up a message box displaying more information:
![hotspot information icon](images/icons/image026.png)
This example shows the 3D hotspot Favorites icon that adds or removes the person from your favorites when tapped:
![hotspot favorites icon](images/icons/image029.png)
Icons on a Button
Buttons with an icon can have only an icon or can have an icon with text. Refer to the Button Standards for details.
Specifications
Color: Monotone gray
Size: 16x16 pixels
Type: Flat
This example shows image buttons (icon only):
This example shows a button with both an icon and text:
![button with both icon and text](images/icons/image033.png)
Icon Sizing
This chart shows the scaling of icons:
![scaling of icons](images/icons/image035.png)