<!-- PLEASE NOTE: Background styling with or without divs are added to better depict white icons. -->
<!-- 1. Extra styling with or without divs are added to better depict white icons -->
<!-- 2. SGV Icons: Extra div with background and display styling IS NOT REQUIRED for usage -->
<!-- 3. IMG Icons: Extra styling attribute IS NOT required for usage -->

<!-- Arrow Down -->
<img alt="down-arrow" src="/img/icons/arrow-down-black.svg">
<img alt="down-arrow" src="/img/icons/arrow-down-white.svg" style="background: #2774AE">
<img alt="down-arrow" src="/img/icons/arrow-down-defaultblue.svg">

<!-- Arrow Left -->
<img alt="left-arrow" src="/img/icons/arrow-left-black.svg">
<img alt="left-arrow" src="/img/icons/arrow-left-white.svg" style="background: #2774AE">
<img alt="left-arrow" src="/img/icons/arrow-left-defaultblue.svg">

<!-- Arrow Right -->
<img alt="right-arrow" src="/img/icons/arrow-right-black.svg">
<img alt="right-arrow" src="/img/icons/arrow-right-white.svg" style="background: #2774AE">
<img alt="right-arrow" src="/img/icons/arrow-right-defaultblue.svg">

<!-- Arrow Up -->
<img alt="up-arrow" src="/img/icons/arrow-up-black.svg">
<img alt="up-arrow" src="/img/icons/arrow-up-white.svg" style="background: #2774AE">
<img alt="up-arrow" src="/img/icons/arrow-up-defaultblue.svg">

<!-- Clear -->
<img alt="clear" src="/img/icons/clear-grey60.svg">
<img alt="clear" src="/img/icons/clear-black.svg">
<img alt="clear" src="/img/icons/clear-white.svg" style="background: #2774AE">

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

<!-- 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">

<!-- External Link -->
<img alt="external-link" src="/img/icons/external-link-black.svg">
<img alt="external-link" src="/img/icons/external-link-white.svg" style="background: #2774AE">
<img alt="external-link" src="/img/icons/external-link-defaultblue.svg">

<!-- Form Submission -->
<img alt="error" src="/img/icons/error-red.svg">
<img alt="success" src="/img/icons/success-green.svg">

<!-- Arrow Forward -->
<img alt="forward-arrow" src="/img/icons/arrow-forward-black.svg">
<img alt="forward-arrow" src="/img/icons/arrow-forward-white.svg" style="background: #2774AE">
<img alt="forward-arrow" src="/img/icons/arrow-forward-defaultblue.svg">

<!-- Informational -->
<img alt="warning" src="/img/icons/warning-orange.svg">
<img alt="information" src="/img/icons/information-lighterblue.svg">

<!-- Location -->
<img alt="location" src="/img/icons/location-black.svg">
<img alt="location" src="/img/icons/location-white.svg" style="background: #2774AE">
<img alt="location" src="/img/icons/location-grey60.svg">

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

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

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

<!-- Sort -->
<img alt="sort-ascending" src="/img/icons/sort-ascending.svg">
<img alt="sort-descending" src="/img/icons/sort-descending.svg">

<!-- Time -->
<img alt="time" src="/img/icons/time-grey60.svg">
<img alt="time" src="/img/icons/time-black.svg">
<img alt="time" src="/img/icons/time-white.svg" style="background: #2774AE">
  • Handle: @denotive-image
  • Preview:
  • Filesystem Path: src/components/04-icons/01-denotive-icons/denotive-image.hbs