Icons

The primary goal of using icons should be to help the user absorb and process information more efficiently. Icons can be used throughout the site whenever it would useful to give users a quick visual cue.

To use an existing icon simply find the one you want from the list below and use the following code (in this example we are using the "delete-icon"):

CiviCRM uses image sprites (more info) for its two icon sets.

The following CRM-specific icons are available:

Individual-icon
Group-icon
Household-icon

Individual-subtype-icon
Household-subtype-icon
Organization-subtype-icon

Organization-icon
Activity-icon
Case-icon
Grant-icon
Contribution-icon
Pledge-icon
Membership-icon
Participant-icon
Note-icon
Relationship-icon

The following non CRM-specific icons are available:

edit-icon
delete-icon
dashboard-icon
user-record-icon
inform-icon
tip-icon

Non CRM-specific icons can be altered to use one of 4 possible colors:

light-icon = #888888
dark-icon = #222222
red-icon = #cd0a0a
blue-icon = #2e83ff

The default icon color is "light-icon" or #222222. To change the color, simply add the color class to the icon div - in the example below the delete icon will be red:

Non CRM-specific icons used inside of a button will change to "dark-icons" when you hover over the button (with the exception of the delete icon, which turns red)