Icons
Icons are important and distinctive visual elements that assist users with object identification, navigation, and workflow. The icons you provide for your solution should be easily recognizable and memorable, and aid users' comprehension. If an icon can appear in a variety of contexts in the UI, you might need to provide icons in different sizes.
Solution Icon
| The solution icon is a visual representation of your solution's identity. A 32 x 32 pixel icon of your solution is required on the vSphere Web Client Home page. Launch points elsewhere in the UI, such as in the Navigator, use a 16 x 16 pixel icon. |
|
Object Icons
An object icon cues the user as to the type of the object. For example, a good icon for a chassis object is an image of a chassis. You must provide this icon when you introduce a new object type into the inventory. On the Summary tab, the object icon is 96 x 124 pixels. Elsewhere in the UI, the icon is 16 x 16 pixels.
Action Icons
An action icon is a visual representation of an activity that users can perform within your solution. Action icons commonly appear in a toolbar and in the Actions Menu. The best action icons represent a single concept and are immediately recognized by users. All action icons are 16 x 16 pixels.
This table lists the icons for common actions.
| Action | Icon |
| Action |  |
| Delete/Remove |  |
| Edit |  |
| Minimize to Work in Progress |  |
| New/Add |  |
| Open signpost help |  |
| Open contextual help |     Normal, hover, down, disabled |
| Power on selected virtual machine |  |
| Refresh |  |
| Restart guest operating systems of the virtual machine |  |
| Shut down the guest operating system or powers off the virtual machine |  |
| Suspend the virtual machine |  |
Message Icons
A message icon is a 32 x 32 pixel icon that helps users quickly grasp the severity of the message in an alert dialog.
|
|
The following table lists the message icons.
| Message | Icon | Description | |
| Information |  | Calls attention to informational text in the UI, such as a tip. | |
| Success |  | Gives positive feedback for most important achievements | |
| Warning | Warns about a condition that might cause harm in the future. | ||
| Error | Reports a problem that has already happened. | ||
| Confirmation |  | Asks users to confirm an action. |
Status Icons
Within a datagrid, icons are used to convey the status of an object.
Status icons are defined as follows.
| Status | Icon | Description | |
| OK/Normal |  | The status of the object is normal. | |
| Warning |  | The object has a condition that might cause harm in the future. | |
| Alert |  | The object has a critical error. | |
| Unknown |  | The status of the object cannot be determined. | |
| Info |  | The object needs user input. |
Design Tips
When creating icons, keep these concepts in mind:
- Make icons realistic enough for easy recognition, but not so realistic that they look like a photo.
- Enhance recognition by simplifying the object to just its most important identifying elements.
- Make smaller icons (16 px and 24 px) front-facing (not in profile) without drop shadows. Larger sizes can be drawn in 3D.
- Keep in mind that your object icon might require badging.
Icon Badges
A badge is a small image that typically overlays the lower-right corner of an icon. (An exception is the "Add" badge, which overlays the upper left corner.)
The following table lists the badges for common actions.
| Icon | Description | Example |
 | Add |  |
 | Alert, critical |  |
 | Assign |  |
 | Cancel |  |
 | Delete |  |
 | Detach |  |
 | Edit |  |
 | Error |  |
 | Manage |  |
 | Powered on |  |
 | Refresh |  |
 | Scheduled |  |
 | Suspended |  |
 | Sync |  |
 | Upload |  |
 | Warning |
Visual Specification
