Icons

Guidance and suggestions for using icon libraries with Arizona Bootstrap.

On this page

Heads Up!

If you're using Arizona Bootstrap, Arizona Icons and/or Material Symbols (Rounded) icons will still need to be added to your project if you would like to use them.

These icons have been approved to use within Arizona web assets like Arizona Quickstart, and Arizona Bootstrap.

Arizona Icons (Arizona branded icons)
Material Symbols (Rounded)

Arizona Icons Implementation

Include a reference to the Arizona Icons’ CDN to your project in order to use the font icons:

<link href="https://cdn.digital.arizona.edu/lib/az-icons/main/az-icons-styles.css" rel="stylesheet">

(Latest vs. Pinned releases coming soon)

In general, developers should use the main branch version of the icons for development work, and then switch to a pinned version when development is done:

Latest is good for when you need to use icons that have been newly released, and you are following the az-icons project and know what has changed and how those changes will affect your site.
Pinned versions are good for any project that wants to be sure to not update az-icons if you don’t purposefully change it.

Refer to Arizona Icons GitHub repository for more information and resources.

.az-icon-arizona

.az-icon-award

.az-icon-cost

.az-icon-facebook

.az-icon-financial-aid

.az-icon-grad-cap

.az-icon-instagram

.az-icon-linkedin

.az-icon-majors-and-degrees

.az-icon-map-marker

.az-icon-pinterest

.az-icon-scholarship

.az-icon-sign-post

.az-icon-spotify

.az-icon-spring-fling

.az-icon-tiktok

.az-icon-twitter

.az-icon-x-twitter

.az-icon-wildcat

.az-icon-youtube

Material Symbols Implementation

Include the Material Symbols’ stylesheet in your project in order to use the font icons. Refer to Material Symbols docs for more information. Be sure to select the filled style icons.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" />

Google’s Material Symbols can be implemented just like text, in that they can combined with any utility class available to text.

Your span should include the .material-symbols-rounded class along with any utility classes you want to include. The text inside the span should be the ID/name of the icon you want to use. Browse the font icon library (rounded style) to find the ID of your desired icon.

accessible_forward accessible_forward accessible_forward

html

<span class="material-symbols-rounded text-sky display-4">accessible_forward</span>
<span class="material-symbols-rounded text-azurite display-3">accessible_forward</span>
<span class="material-symbols-rounded text-blue display-1">accessible_forward</span>