Icons

bitbucket Report an Issue Slack Join the Slack Discussion

Icons in our library are provided as an extension. If you are using our UCLA WordPress theme, the icons are 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 and have been reviewed by the DCP. Strategic Communications strongly encourages the use of light weight SVGs for UCLA websites or application. All icons are available in SVG format and can be used as raw SVG code or by linking to the image files. Icons have been created and reviewed according to the known needs of the university.

  1. Export as SVG version1.1 to convert SVG to inline styles.
  2. IDs removed have been removed to prevent duplicate IDs per page in case icon is used more than once per page.
  3. Classes updated to BEM naming convention.
  4. Inline titles tags added to the SVG.
  5. DCP has reviewed the icon with a screen reader.

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

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

Weather Icons

foggy foggy moon moon overcast Overcast partly cloudy partly cloudy partly sunny partly sunny light rain light rain 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


<!-- Download Black -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
   <title>Download</title>
<style type="text/css">
    .download--black{fill-rule:evenodd;clip-rule:evenodd;fill:#000;}
</style>
<path class="download--black" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
    S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z"/>
</svg>

<div style="background: #2774AE; display: inline-block;">
  <!-- Download White -->
  <svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
     <title>Download</title>
  <style type="text/css">
      .download--white{fill-rule:evenodd;clip-rule:evenodd;fill:#fff;}
  </style>
  <path class="download--white" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
      S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z"/>
  </svg>
</div>


<!-- Download Blue -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
   <title>Download</title>
<style type="text/css">
    .download--blue{fill-rule:evenodd;clip-rule:evenodd;fill:#00598C;}
</style>
<path class="download--blue" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
    S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z"/>
</svg>