Icons

Icons are used to represent McMaster services, subjects and way-finding tools simply and visually. These icons are pared down to their simplest form for a contemporary look and for maximum clarity. When creating new icons, keep in mind that, in some cases, we also need to consider interaction states, such as hover, clickable and disabled. As a reference, always use the icon examples below, created for the McMaster.ca homepage.

Font Awesome Icons

Get vector icons and social logos on your website with Font Awesome. Simply add the script to the head of your document and implement the icons with the following code. You can grab a list of available icons here: https://fontawesome.com/icons

  <!-- Add Font Awesome to document head -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-
slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

<i class="far fa-thumbs-up"></i>

Image Icon Examples

When creating new icons, keep in mind that, in some cases, we also need to consider interaction states, such as hover, clickable and disabled. As a reference, always use the icon examples below, which were created for the McMaster.ca homepage.

bank icon
book icon
bookmark icon
medical briefcase icon
briefcase icon
calendar icon
graduation cap icon
rolled certificate icon
certificate icon
chair icon
dollar icon
globe icon
graph icon
info icon
letter icon
lightbulb icon
list icon
micro icon
microscope icon
pencil icon
person icon
pin icon
plus icon
shield icon
trophy icon
wallet icon
<div class="row">
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-bank_svg.svg" alt="bank icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-book_svg.svg" alt="book icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-bookmark_svg.svg" alt="bookmark icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-briefcase-plus_svg.svg" alt="medical briefcase icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-briefcase_svg.svg" alt="briefcase icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-calendar_svg.svg" alt="calendar icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-cap_svg.svg" alt="graduation cap icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-certificate-roll_svg.svg" alt="rolled certificate icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-certificate_svg.svg" alt="certificate icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-chair_svg.svg" alt="chair icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-dollar_svg.svg" alt="dollar icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-globe_svg.svg" alt="globe icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-graph_svg.svg" alt="graph icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-info_svg.svg" alt="info icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-letter_svg.svg" alt="letter icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-lightbulb_svg.svg" alt="lightbulb icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-list_svg.svg" alt="list icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-micro_svg.svg" alt="micro icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-microscope_svg.svg" alt="microscope icon"></a>
           </div>
           <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-pencil_svg.svg" alt="pencil icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-person_svg.svg" alt="person icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-pin_svg.svg" alt="pin icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-plus_svg.svg" alt="plus icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-shield_svg.svg" alt="shield icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-trophy_svg.svg" alt="trophy icon"></a>
     </div>
     <div class="col-lg-2 text-center">
             <a class="icon-circle" href=""><img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-wallet_svg.svg" alt="wallet icon"></a>
     </div>
</div>