Iconography

When icons are used correctly, they bring many UX and usability benefits. At UCSB, our branding elements include a vast library of icons to use on your website. 

• Icons are easily recognizable. If you use common icons in your designs, your audience will recognize them instantly, helping with navigation and tasks.

• Icons save space. This benefit is especially important on mobiles where using icons can save valuable real estate.

• Icons are universal. The meaning of icons can be easily understood, even if users don’t speak your language.

• Icons are aesthetically appealing. UCSB's well-designed icon library can make a website or app more visually attractive.

How to use icons

1. On the Editor Toolbar, select 'UCSB Icon' from the editor toolbar. 
   
2. Select the icon from the library, add a color and choose alignment. Enter an internal url if you want to link the icon (start your link with a trailing slash). 

   

Install the Icon Library

1. Go to 'Extend' and enable two modules: CKEditor UCSB Icon and Entity Embed
2. Go to Configuration > Content Authoring > Text Formats & Editors > Full Html > Configure 
3. Locate the UCSB Icon button from the 'Available Buttons' section and drag it into the Active Toolbar.
4. On that same page, go down to the 'Enabled Filters' section. Check the box 'Display embedded entities'. This allows you to preview the icon from within the editor toolbar window.

Tips

• Don't make your own icons. If there is an icon that is missing from our library, please contact us and our team will create one in the same style as our existing library.
• Provide a corresponding text label with your icons whenever possible, displaying to the right or below the icon. This will help promote familiarity for your visitors.
• Ensure your use of icons help convey meaning. Don't use them to simply add style to your page.
• If you are using a colored background, make sure there is sufficient contrast for readability. Accessibility tools are good for auditing proper contrast.