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

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

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

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

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

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

<!-- Form Submission -->
<img alt="success" src="../../icons/denotive/form-success.svg">
<img alt="error" src="../../icons/denotive/form-error.svg">
<img alt="error" src="../../icons/denotive/form-warning.svg">

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

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

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

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

<!-- New Window -->
<img alt="new window" src="../../icons/denotive/new-window--black.svg">
<img alt="new window" src="../../icons/denotive/new-window--white.svg" style="background: #2774AE">
<img alt="new window" src="../../icons/denotive/new-window--blue.svg">

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

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

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

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

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

<!-- Up Arrow -->
<img alt="up arrow" src="../../icons/denotive/up-arrow--black.svg">
<img alt="up arrow" src="../../icons/denotive/up-arrow--white.svg" style="background: #2774AE">
<img alt="up arrow" src="../../icons/denotive/up-arrow--blue.svg">
<!-- 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 -->

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

<!-- Close -->
<img alt="close" src="{{path '/icons/denotive/close--black.svg'}}">
<img alt="close" src="{{path '/icons/denotive/close--white.svg'}}" style="background: #2774AE">
<img alt="close" src="{{path '/icons/denotive/close--blue.svg'}}">

<!-- Down Arrow -->
<img alt="down arrow" src="{{path '/icons/denotive/down--black.svg'}}">
<img alt="down arrow" src="{{path '/icons/denotive/down--white.svg'}}" style="background: #2774AE">
<img alt="down arrow" src="{{path '/icons/denotive/down--blue.svg'}}">

<!-- Download -->
<img alt="download" src="{{path '/icons/denotive/download--black.svg'}}">
<img alt="download" src="{{path '/icons/denotive/download--white.svg'}}" style="background: #2774AE">
<img alt="download" src="{{path '/icons/denotive/download--blue.svg'}}">

<!-- External Link -->
<img alt="external link" src="{{path '/icons/denotive/external-link--black.svg'}}">
<img alt="external link" src="{{path '/icons/denotive/external-link--defaultblue.svg'}}">
<img alt="external link" src="{{path '/icons/denotive/external-link--white.svg'}}" style="background: #2774AE">
<img alt="external link" src="{{path '/icons/denotive/external-link--activeblue.svg'}}">
<img alt="external link" src="{{path '/icons/denotive/external-link--disabledgrey.svg'}}">

<!-- Form Submission -->
<img alt="success" src="{{path '/icons/denotive/form-success.svg'}}">
<img alt="error" src="{{path '/icons/denotive/form-error.svg'}}">
<img alt="error" src="{{path '/icons/denotive/form-warning.svg'}}">

<!-- Forward Arrow -->
<img alt="forward arrow" src="{{path '/icons/denotive/forward-arrow--black.svg'}}">
<img alt="forward arrow" src="{{path '/icons/denotive/forward-arrow--white.svg'}}" style="background: #2774AE">
<img alt="forward arrow" src="{{path '/icons/denotive/forward-arrow--blue.svg'}}">

<!-- Left Arrow -->
<img alt="left arrow" src="{{path '/icons/denotive/left-arrow--black.svg'}}">
<img alt="left arrow" src="{{path '/icons/denotive/left-arrow--white.svg'}}" style="background: #2774AE">
<img alt="left arrow" src="{{path '/icons/denotive/left-arrow--blue.svg'}}">

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

<!-- Menu -->
<img alt="menu" src="{{path '/icons/denotive/menu--black.svg'}}">
<img alt="menu" src="{{path '/icons/denotive/menu--white.svg'}}" style="background: #2774AE">
<img alt="menu" src="{{path '/icons/denotive/menu--blue.svg'}}">

<!-- New Window -->
<img alt="new window" src="{{path '/icons/denotive/new-window--black.svg'}}">
<img alt="new window" src="{{path '/icons/denotive/new-window--white.svg'}}" style="background: #2774AE">
<img alt="new window" src="{{path '/icons/denotive/new-window--blue.svg'}}">

<!-- Play -->
<img alt="play" src="{{path '/icons/denotive/play--black.svg'}}">
<img alt="play" src="{{path '/icons/denotive/play--white.svg'}}" style="background: #2774AE">
<img alt="play" src="{{path '/icons/denotive/play--blue.svg'}}">

<!-- Right Arrow -->
<img alt="right arrow" src="{{path '/icons/denotive/right-arrow--black.svg'}}">
<img alt="right arrow" src="{{path '/icons/denotive/right-arrow--white.svg'}}" style="background: #2774AE">
<img alt="right arrow" src="{{path '/icons/denotive/right-arrow--blue.svg'}}">

<!-- Search -->
<img alt="search" src="{{path '/icons/denotive/search--grey60.svg'}}">
<img alt="search" src="{{path '/icons/denotive/search--black.svg'}}">
<img alt="search" src="{{path '/icons/denotive/search--white.svg'}}" style="background: #2774AE">
<img alt="search" src="{{path '/icons/denotive/search--blue.svg'}}">

<!-- Sort -->
<img alt="sort ascending" src="{{path '/icons/denotive/sort--ascending.svg'}}">
<img alt="sort descending" src="{{path '/icons/denotive/sort--descending.svg'}}">

<!-- Time -->
<img alt="time" src="{{path '/icons/denotive/time--grey60.svg'}}">
<img alt="time" src="{{path '/icons/denotive/time--black.svg'}}">
<img alt="time" src="{{path '/icons/denotive/time--white.svg'}}" style="background: #2774AE">

<!-- Up Arrow -->
<img alt="up arrow" src="{{path '/icons/denotive/up-arrow--black.svg'}}">
<img alt="up arrow" src="{{path '/icons/denotive/up-arrow--white.svg'}}" style="background: #2774AE">
<img alt="up arrow" src="{{path '/icons/denotive/up-arrow--blue.svg'}}">
/* No context defined. */
  • Handle: @denotive-icons
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/01-denotive-icons/denotive-icons.hbs

No notes defined.