Navigation Icons
Navigation icons provide our users with an easily recognizable visual for parent-level items within the Sidenav or Topbar. Combined with their text labels, they will speed up recognition and processing of the link text. Navigation icons are especially important when the user has collapsed the Sidenav as they are the only item immediately visible to the user.
Our Navigation icons fit into two groups: canonized and generic. Most of our icons are canonized and have a consistent meaning. Any time a user sees a canonized icon they should know exactly what page they will be taken to. On the contrary, when a generic icon is used, the page a user is taken to may differ slightly based on the product they are accessing it from.
Canonized icons
Canonized icons should never be reused to represent more than one feature or tool.
Account management
zui-nav-accounts
Administrators
zui-nav-administrators
Agencies
zui-nav-company
Carrier info
zui-nav-carrier
Client Portal
zui-nav-client-portal
Communications
zui-nav-communications
Compliance apps
zui-nav-compliance-apps
Community
zui-nav-community
Components
zui-nav-components
Concepts
zui-nav-concepts
Content library
zui-nav-content
Course catalog
zui-nav-course-catalog
Course packages
zui-nav-course-packages
Credentials
zui-nav-credentials
Developers
zui-nav-developers
Disease profiles
zui-nav-disease-profiles
Domains
zui-nav-domains
Email marketing
zui-nav-email-marketing
Files
zui-nav-files
Foundations
zui-nav-foundations
From your broker
zui-nav-from-your-broker
Get started
zui-nav-get-started
Group Management
zui-nav-group-management
Handbooks
zui-nav-handbook
Help and training
zui-nav-help
Home
zui-nav-home
HR apps
zui-nav-hr-apps
HR Hotline
zui-nav-hr-hotline
Import request queue
zui-nav-import-request-queue
Integrations
zui-nav-integrations
Lists
zui-nav-lists
LMS
zui-nav-lms
Manage users
zui-nav-manage-user
Mods
zui-nav-mods
Notices
zui-nav-notices
Notifications
zui-nav-notifications
Organizations
zui-nav-organization
OSHA log
zui-nav-osha-log
Packages
zui-nav-packages
Patterns
zui-nav-patterns
Plan selector
zui-nav-plan-selector
Portal admin
zui-nav-portal-admin
Proposals
zui-nav-proposals
Proposals (UK)
zui-nav-proposals-uk
Prospecting
zui-nav-prospecting
Registered apps
zui-nav-registered-apps
Settings
zui-nav-settings
Single sign on
zui-nav-single-sign-on
Solutions
zui-nav-solutions
Specifications
zui-nav-specifications
Toolbox
zui-nav-toolbox
Users
zui-nav-users
Zywave sidebar
zui-nav-zywave-sidebar
Generic icons
Generic icons have a more general meaning and can be used to represent more than one feature or tool.
Admin
zui-nav-generic-admin
Branding
zui-nav-generic-branding
Generic placeholder*
zui-nav-generic-placeholder
Reports
zui-nav-generic-reports
Resources
zui-nav-generic-resources
* The generic placeholder icon should never make it to production in any of our products. It should only be used as a temporary icon while another is being created to represent the new parent-level menu item.
Shell icons
These icons are used specifically in Shell's 2 core sections: topbar and sidenav. Shell icons help identify major navigational features and different user states in applications.
Apps
zui-shell-apps
Impersonation
zui-shell-impersonation
Menu
zui-shell-menu
System Icons
Our system icons are a set of line icons that can be used throughout the UI to draw more attention to a specific element or action. Typically our system icons are used to the left of the text label within buttons to help draw more attention to them. Or, if the icon is easily identifiable, the icon can be used alone within a button in order to save space.
Standard system icons
Add
zui-add
Add to Action Items
zui-action-items-add
Building
zui-building
Calendar
zui-calendar
Caret Down
zui-caret-down
Caret Left
zui-caret-left
Caret Right
zui-caret-right
Caret Up
zui-caret-up
Check
zui-check
Chevron Down
zui-chevron-down
Chevron Left
zui-chevron-left
Chevron Right
zui-chevron-right
Chevron Up
zui-chevron-up
Copy
zui-copy
Delete
zui-delete
Details
zui-details
Document
zui-doc
Double Chevron Left
zui-double-chevron-left
Double Chevron Right
zui-double-chevron-right
Down
zui-down
Download
zui-download
Edit
zui-edit
Excel File
zui-excel
External
zui-external
File drop
zui-file-drop
Filter
zui-filter
Folder
zui-folder
Grid
zui-grid
Grip
zui-grip
Group add
zui-group-add
Help
zui-help
Impersonation
zui-impersonation
Left
zui-left
Link
zui-link
List
zui-list
Locked
zui-lock
Mail
zui-mail
More
zui-more
Move To
zui-move-to
MP3
zui-mp3
MP4
zui-mp4
Multiple Files
zui-multiple-files
New File
zui-new-file
New Folder
zui-new-folder
PDF
zui-pdf
Phone
zui-phone
PowerPoint
zui-ppt
Print
zui-print
Refresh
zui-refresh
Remove
zui-remove
Rename
zui-rename
Reporting
zui-reporting
Right
zui-right
Rocket
zui-rocket
Search
zui-search
Share
zui-share
Shared With
zui-shared-with
Sort
zui-sort
Switch Profile
zui-switch-profile
Table
zui-table
Unlocked
zui-unlock
Up
zui-up
Upload
zui-upload
User
zui-user
Video
zui-video
Word Document
zui-word
Wrench
zui-wrench
Status/type indicator icons
Add Indicator
zui-indicator-add
Backslash Indicator
zui-indicator-backslash
Failure Indicator
zui-indicator-failure
Remove Indicator
zui-indicator-remove
Success Indicator
zui-indicator-success
Warning Indicator
zui-indicator-warning
Error
zui-error
Info
zui-info
Success
zui-success
Warning
zui-warning
File system icons
All file system icons have a default color to help users make connections with other, non-Zywave systems. Grayscale is available for edge case scenarios, and should be used rarely.
Audio File
zui-fs-audio
Code File
zui-fs-code
Generic document
zui-fs-doc
Folder
zui-fs-folder
Generic Image File
zui-fs-image
Multiple Files
zui-fs-multiple-files
Generic Video File
zui-fs-video
7-Zip Archive File
zui-fs-7z
Zip File
zui-fs-zip
MP3 File
zui-fs-mp3
WAV File
zui-fs-wav
Adobe Illustrator File
zui-fs-ai
EPS File
zui-fs-eps
GIF File
zui-fs-gif
JPG File
zui-fs-jpg
PNG File
zui-fs-png
Adobe PostScript File
zui-fs-ps
Adobe Photoshop File
zui-fs-psd
TIF File
zui-fs-tif
PDF File
zui-fs-pdf
Microsoft PowerPoint File
zui-fs-ppt
Microsoft Word File
zui-fs-word
Microsoft Excel File
zui-fs-excel
CSS File
zui-fs-css
HTML File
zui-fs-html
Java File
zui-fs-java
XML File
zui-fs-xml
Doc File
zui-fs-doc
TXT File
zui-fs-txt
MOV File
zui-fs-mov
MPG File
zui-fs-mpg
MP4 File
zui-fs-mp4
Deprecated icons
| Deprecated icon | Replacement icon | Deprecation date |
|---|---|---|
| zui-nav-admin | zui-nav-generic-admin | 2023-04-03 |
| zui-nav-color-themes | zui-nav-generic-branding | 2023-04-03 |
| zui-nav-menu | zui-shell-menu | 2023-04-03 |
| zui-nav-org-overview | zui-nav-company | 2023-04-03 |
| zui-nav-reports | zui-nav-generic-reports | 2023-04-03 |
| zui-nav-resources | zui-nav-generic-resources | 2023-04-03 |
| zui-nav-zywave-university | zui-nav-lms | 2023-04-03 |
| zui-add-circle | zui-indicator-add | 2023-04-03 |
| zui-align | zui-nav-lists | 2023-04-03 |
| zui-apps | zui-shell-apps | 2023-04-03 |
| zui-check-circle | zui-indicator-success | 2023-04-03 |
| zui-close | zui-remove | 2023-04-03 |
| zui-close-circle | zui-indicator-failure | 2023-04-03 |
| zui-minus | zui-remove | 2023-04-03 |
| zui-remove-circle | zui-indicator-remove | 2023-04-03 |
| zui-warning-circle | zui-indicator-warning | 2023-04-03 |