UCLA Component Library

Icons

Icons in our library are provided as an extension. If you are using our UCLA theme, the icons are already conveniently installed on your site. We have also supplied the icons for download via zip file.

Download Icons

Download Icons Zip File

Usage

Accessibility Requirements

The supplied icons are ADA compliant. Strategic Communications strongly encourages using these for your UCLA website or application. All icons are available in SVG format and can be used as raw SVG code or by linking to the image files.

Please Note

  1. Extra styling with or without divs are added to better depict white icons
  2. SVG Icons: Extra div with background and display styling IS NOT REQUIRED for usage
  3. IMG Icons: Extra styling attribute IS NOT required for usage

Denotive Icons

down-arrow down-arrow down-arrow left-arrow left-arrow left-arrow right-arrow right-arrow right-arrow up-arrow up-arrow up-arrow clear clear clear close close close download download download external-link external-link external-link error success forward-arrow forward-arrow forward-arrow warning information location location location menu menu menu play play play search search search search sort-ascending sort-descending time time time

Weather Icons

Foggy Foggy Light Rain Light Rain Moon Moon Overcast Overcast Partly Cloudy Partly Cloudy Partly Sunny Partly Sunny Sunny Sunny

Social Icons

Linkedin Linkedin Linkedin Twitter Twitter Twitter Facebook Facebook Facebook Instagram Instagram Instagram Snapchat Snapchat Snapchat Youtube Youtube Youtube Tiktok Tiktok Tiktok

Code

Use as an Image

download download download 
<!-- Download -->
<img alt="download" src="/img/icons/download-black.svg">
<img alt="download" src="/img/icons/download-white.svg" style="background: #2774AE">
<img alt="download" src="/img/icons/download-defaultblue.svg">

Use as Inline SVG

Inline SVGs do not require a <?xml> doctype declaration. A <!DOCTYPE> should already be declared at the very top of your page.

Download
Download
Download 
<div style="display: inline-block">
  <!-- Download Black -->
  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Download</title>
      <g id="Icon/download-defaultblue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,7 C14.6111593,7 7,14.6111593 7,24 C7,33.3888407 14.6111593,41 24,41 C33.3888407,41 41,33.3888407 41,24 C41,14.6111593 33.3888407,7 24,7 Z M25.6666667,10.6666667 L25.6666667,30.95 L34.9833333,21.65 L37.3333333,24 L24,37.3333333 L10.6666667,24 L13.0333333,21.6333333 L22.3333333,30.95 L22.3333333,10.6666667 L25.6666667,10.6666667 Z" id="Combined-Shape" fill="#000000"></path>
      </g>
  </svg>

  <div style="background: #2774AE; display: inline-block;">
    <!-- Download White -->
    <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Download</title>
      <g id="Icon/download-defaultblue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,7 C14.6111593,7 7,14.6111593 7,24 C7,33.3888407 14.6111593,41 24,41 C33.3888407,41 41,33.3888407 41,24 C41,14.6111593 33.3888407,7 24,7 Z M25.6666667,10.6666667 L25.6666667,30.95 L34.9833333,21.65 L37.3333333,24 L24,37.3333333 L10.6666667,24 L13.0333333,21.6333333 L22.3333333,30.95 L22.3333333,10.6666667 L25.6666667,10.6666667 Z" id="Combined-Shape" fill="#FFFFFF"></path>
      </g>
    </svg>
  </div>


  <!-- Download Blue -->
  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Download</title>
      <g id="Icon/download-defaultblue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,7 C14.6111593,7 7,14.6111593 7,24 C7,33.3888407 14.6111593,41 24,41 C33.3888407,41 41,33.3888407 41,24 C41,14.6111593 33.3888407,7 24,7 Z M25.6666667,10.6666667 L25.6666667,30.95 L34.9833333,21.65 L37.3333333,24 L24,37.3333333 L10.6666667,24 L13.0333333,21.6333333 L22.3333333,30.95 L22.3333333,10.6666667 L25.6666667,10.6666667 Z" id="Combined-Shape" fill="#00598C"></path>
      </g>
  </svg>
</div>