Secondary icons

Skip to main guidance


        
        
            <!-- Default -->
<svg class="ontario-icon" alt="" sol:category="" aria-hidden="true" focusable="false" viewBox="" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#"></use>
</svg>


        
            <!-- Ontario Icon Account -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-account"></use>
</svg>


        
            <!-- Ontario Icon Attach -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-attach"></use>
</svg>


        
            <!-- Ontario Icon Bookmark Off -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-bookmark-off"></use>
</svg>


        
            <!-- Ontario Icon Bookmark On -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-bookmark-on"></use>
</svg>


        
            <!-- Ontario Icon Calendar -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-calendar"></use>
</svg>


        
            <!-- Ontario Icon Camera -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-camera"></use>
</svg>


        
            <!-- Ontario Icon Clock -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-clock"></use>
</svg>


        
            <!-- Ontario Icon Cloud -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-cloud"></use>
</svg>


        
            <!-- Ontario Icon Delete -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-delete"></use>
</svg>


        
            <!-- Ontario Icon Document -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-document"></use>
</svg>


        
            <!-- Ontario Icon Download -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-download"></use>
</svg>


        
            <!-- Ontario Icon Edit -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-edit"></use>
</svg>


        
            <!-- Ontario Icon Export -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-export"></use>
</svg>


        
            <!-- Ontario Icon Facebook -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-facebook"></use>
</svg>


        
            <!-- Ontario Icon Facebook Alt -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-facebook-alt"></use>
</svg>


        
            <!-- Ontario Icon Favourite Off -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-favourite-off"></use>
</svg>


        
            <!-- Ontario Icon Favourite On -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-favourite-on"></use>
</svg>


        
            <!-- Ontario Icon Filter -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-filter"></use>
</svg>


        
            <!-- Ontario Icon Flickr -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-flickr"></use>
</svg>


        
            <!-- Ontario Icon Grid -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-grid"></use>
</svg>


        
            <!-- Ontario Icon Instagram -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-instagram"></use>
</svg>


        
            <!-- Ontario Icon Interac En -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 32 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-interac-en"></use>
</svg>


        
            <!-- Ontario Icon Interac En Alt -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-interac-en-alt"></use>
</svg>


        
            <!-- Ontario Icon Interac Fr -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 40 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-interac-fr"></use>
</svg>


        
            <!-- Ontario Icon Interac Fr Alt -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-interac-fr-alt"></use>
</svg>


        
            <!-- Ontario Icon Link Url -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-link-url"></use>
</svg>


        
            <!-- Ontario Icon Linkedin -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-linkedin"></use>
</svg>


        
            <!-- Ontario Icon Linkedin Alt -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-linkedin-alt"></use>
</svg>


        
            <!-- Ontario Icon List -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-list"></use>
</svg>


        
            <!-- Ontario Icon Live Chat -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-live-chat"></use>
</svg>


        
            <!-- Ontario Icon Location Off -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-location-off"></use>
</svg>


        
            <!-- Ontario Icon Location On -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-location-on"></use>
</svg>


        
            <!-- Ontario Icon Location Searching -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-location-searching"></use>
</svg>


        
            <!-- Ontario Icon Lock Off -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-lock-off"></use>
</svg>


        
            <!-- Ontario Icon Lock On -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-lock-on"></use>
</svg>


        
            <!-- Ontario Icon Map -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-map"></use>
</svg>


        
            <!-- Ontario Icon Mastercard -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-mastercard"></use>
</svg>


        
            <!-- Ontario Icon Mastercard Alt -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-mastercard-alt"></use>
</svg>


        
            <!-- Ontario Icon Media Fast Forward -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-media-fast-forward"></use>
</svg>


        
            <!-- Ontario Icon Media Fast Rewind -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-media-fast-rewind"></use>
</svg>


        
            <!-- Ontario Icon Media Pause -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-media-pause"></use>
</svg>


        
            <!-- Ontario Icon Media Play -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-media-play"></use>
</svg>


        
            <!-- Ontario Icon Media Stop -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-media-stop"></use>
</svg>


        
            <!-- Ontario Icon Microphone Off -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-microphone-off"></use>
</svg>


        
            <!-- Ontario Icon Microphone On -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-microphone-on"></use>
</svg>


        
            <!-- Ontario Icon More Vertical -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-more-vertical"></use>
</svg>


        
            <!-- Ontario Icon Next -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-next"></use>
</svg>


        
            <!-- Ontario Icon Notification -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-notification"></use>
</svg>


        
            <!-- Ontario Icon Password Hide -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-password-hide"></use>
</svg>


        
            <!-- Ontario Icon Password Show -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-password-show"></use>
</svg>


        
            <!-- Ontario Icon Photo -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-photo"></use>
</svg>


        
            <!-- Ontario Icon Pin Location Off -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-pin-location-off"></use>
</svg>


        
            <!-- Ontario Icon Pin Location On -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-pin-location-on"></use>
</svg>


        
            <!-- Ontario Icon Previous -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-previous"></use>
</svg>


        
            <!-- Ontario Icon Print -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-print"></use>
</svg>


        
            <!-- Ontario Icon Replay -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-replay"></use>
</svg>


        
            <!-- Ontario Icon Rss Feed -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-rss-feed"></use>
</svg>


        
            <!-- Ontario Icon Save -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-save"></use>
</svg>


        
            <!-- Ontario Icon Sentiment 1 -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sentiment-1"></use>
</svg>


        
            <!-- Ontario Icon Sentiment 2 -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sentiment-2"></use>
</svg>


        
            <!-- Ontario Icon Sentiment 3 -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sentiment-3"></use>
</svg>


        
            <!-- Ontario Icon Sentiment 4 -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sentiment-4"></use>
</svg>


        
            <!-- Ontario Icon Sentiment 5 -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sentiment-5"></use>
</svg>


        
            <!-- Ontario Icon Settings -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-settings"></use>
</svg>


        
            <!-- Ontario Icon Share -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-share"></use>
</svg>


        
            <!-- Ontario Icon Sort -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-sort"></use>
</svg>


        
            <!-- Ontario Icon Tag -->
<svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-tag"></use>
</svg>


        
            <!-- Ontario Icon Text Message -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-text-message"></use>
</svg>


        
            <!-- Ontario Icon Timer -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-timer"></use>
</svg>


        
            <!-- Ontario Icon Transport Bicycle -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-transport-bicycle"></use>
</svg>


        
            <!-- Ontario Icon Transport Bus -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-transport-bus"></use>
</svg>


        
            <!-- Ontario Icon Transport Car -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-transport-car"></use>
</svg>


        
            <!-- Ontario Icon Transport Walk -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-transport-walk"></use>
</svg>


        
            <!-- Ontario Icon Twitter Alt -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-twitter-alt"></use>
</svg>


        
            <!-- Ontario Icon Twitter X -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-twitter-x"></use>
</svg>


        
            <!-- Ontario Icon Upload -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-upload"></use>
</svg>


        
            <!-- Ontario Icon Video -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-video"></use>
</svg>


        
            <!-- Ontario Icon Visa -->
<svg class="ontario-icon" alt="" sol:category="payment" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-visa"></use>
</svg>


        
            <!-- Ontario Icon Vote Dislike -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-vote-dislike"></use>
</svg>


        
            <!-- Ontario Icon Vote Like -->
<svg class="ontario-icon" alt="" sol:category="feedback" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-vote-like"></use>
</svg>


        
            <!-- Ontario Icon Vpn Key -->
<svg class="ontario-icon" alt="" sol:category="interactions" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-vpn-key"></use>
</svg>


        
            <!-- Ontario Icon Wheelchair -->
<svg class="ontario-icon" alt="" sol:category="maps and transportation" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-wheelchair"></use>
</svg>


        
            <!-- Ontario Icon Wifi -->
<svg class="ontario-icon" alt="" sol:category="multimedia" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-wifi"></use>
</svg>


        
            <!-- Ontario Icon Youtube -->
<svg class="ontario-icon" alt="" sol:category="communication" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
    <use href="../../icons/ontario-icons-secondary.svg#ontario-icon-youtube"></use>
</svg>

Guiding principle: Only include elements that have a purpose.

General icon guidance

Icons are a visual representation of a single and simple object, action or idea. If you need to communicate more complicated concepts, consider an illustration or infographic.

The Ontario Design System icon library

The Ontario Design System icon library is made up of two sets:

Primary – these represent the most commonly used concepts on our services (such as phone, menu, search)
Secondary – these represent concepts that are used often but not as frequently (such as attach, print, map pin)

If you need a different icon

If the concept you need to represent isn’t already in our icon library, you can choose one from the Google Material Design:

icon library (use the filled versions)
community-led iconography library

Please let the design system team know any time you need an icon that isn’t in our icon library. If we find the same ones are being commonly used, we’ll consider adding them to the library.

Why we chose these icons

The Ontario Design System follows the Material Design system icon design principles and uses icons from Material Design’s icon library.

We’ve chosen the icons for our library based on proven best practices that all icons we use must be:

a visual representation of a single object, action, or idea
easily recognizable and understandable
likely to be interpreted in the same way by users
used to represent “universal recognition” as opposed to “universal representation”
- for example, a wheelchair is often used for accessibility even though it does not represent all types of disabilities
useful
- icons should help guide the user to accomplish their task – don’t use icons purely for visual interest

Secondary icon set

These icons represent concepts that are used often but not as frequently as ones in the primary set (such as attach, print, map pin).

Skip to how to use secondary icons.

All icons follow the naming pattern “ontario-icon-purpose”. You can search for specific icons using your browser’s find command (ctrl+f for PC, ⌘+f for Mac)

Download all icons as PNG

Secondary icon categories

We’ve organized the secondary icons into these categories:

Accounts and web applications
Interactions
Multimedia
Communication and social media
Payment
Maps and transportation
Feedback

Accounts and web applications

Icon name	Purpose or aliases	Download
ontario-icon-account		PNG , SVG
ontario-icon-bookmark-off	Favourite, save	PNG , SVG
ontario-icon-bookmark-on	Favourite, save	PNG , SVG
ontario-icon-cloud		PNG , SVG
ontario-icon-more-vertical		PNG , SVG
ontario-icon-notification	Alert	PNG , SVG
ontario-icon-password-hide		PNG , SVG
ontario-icon-password-show		PNG , SVG
ontario-icon-settings		PNG , SVG
ontario-icon-tag		PNG , SVG

Interactions

Icon name	Purpose or aliases	Download
ontario-icon-attach	Attachment, file	PNG , SVG
ontario-icon-calendar	Date, date picker	PNG , SVG
ontario-icon-clock	Time, schedule	PNG , SVG
ontario-icon-delete	Delete, remove	PNG , SVG
ontario-icon-document	Attach, file type, file	PNG , SVG
ontario-icon-download		PNG , SVG
ontario-icon-edit		PNG , SVG
ontario-icon-export		PNG , SVG
ontario-icon-favourite-off	Like, save, heart	PNG , SVG
ontario-icon-favourite-on	Like, save, heart	PNG , SVG
ontario-icon-filter	Filter	PNG , SVG
ontario-icon-grid	Change view	PNG , SVG
ontario-icon-list	Change view	PNG , SVG
ontario-icon-location-off	Turn off location, gps	PNG , SVG
ontario-icon-location-on	Find location, gps	PNG , SVG
ontario-icon-lock-on	Safe, password	PNG , SVG
ontario-icon-lock-off	Safe, password	PNG , SVG
ontario-icon-next		PNG , SVG
ontario-icon-pin-location-off	Find location	PNG , SVG
ontario-icon-pin-location-on	Find location	PNG , SVG
ontario-icon-previous		PNG , SVG
ontario-icon-print	Print	PNG , SVG
ontario-icon-save	Save	PNG , SVG
ontario-icon-sort	Sort	PNG , SVG
ontario-icon-timer	Stopwatch	PNG , SVG
ontario-icon-upload		PNG , SVG
ontario-icon-vpn-key		PNG , SVG

Multimedia

Icon name	Purpose or aliases	Download
ontario-icon-camera		PNG , SVG
ontario-icon-media-fast-forward	Speed up	PNG , SVG
ontario-icon-media-fast-rewind	Back	PNG , SVG
ontario-icon-media-pause		PNG , SVG
ontario-icon-media-play		PNG , SVG
ontario-icon-media-stop		PNG , SVG
ontario-icon-microphone-off	Record	PNG , SVG
ontario-icon-microphone-on	Record	PNG , SVG
ontario-icon-photo		PNG , SVG
ontario-icon-replay		PNG , SVG
ontario-icon-video		PNG , SVG
ontario-icon-wifi		PNG , SVG

Icon name	Purpose or aliases	Download
ontario-icon-facebook		PNG , SVG
ontario-icon-facebook-alt		PNG , SVG
ontario-icon-flickr		PNG , SVG
ontario-icon-instagram		PNG , SVG
ontario-icon-linkedin		PNG , SVG
ontario-icon-linkedin-alt		PNG , SVG
ontario-icon-live-chat		PNG , SVG
ontario-icon-rss-feed		PNG , SVG
ontario-icon-share		PNG , SVG
ontario-icon-text-message	sms, text message	PNG , SVG
ontario-icon-twitter-x		PNG , SVG
ontario-icon-twitter-alt		PNG , SVG
ontario-icon-youtube		PNG , SVG

Payment

Icon	Icon name	Download
	ontario-icon-interac-en	PNG , SVG
	ontario-icon-interac-fr	PNG , SVG
	ontario-icon-interac-en-alt	PNG , SVG
	ontario-icon-interac-fr-alt	PNG , SVG
	ontario-icon-mastercard	PNG , SVG
	ontario-icon-mastercard-alt	PNG , SVG
	ontario-icon-visa	PNG , SVG

Maps and transportation

Icon	Icon name	Download
	ontario-icon-map	PNG , SVG
	ontario-icon-transport-bicycle	PNG , SVG
	ontario-icon-transport-bus	PNG , SVG
	ontario-icon-transport-car	PNG , SVG
	ontario-icon-transport-walk	PNG , SVG
	ontario-icon-wheelchair	PNG , SVG

Feedback

Icon	Icon name	Download
	ontario-icon-sentiment-1	PNG , SVG
	ontario-icon-sentiment-2	PNG , SVG
	ontario-icon-sentiment-3	PNG , SVG
	ontario-icon-sentiment-4	PNG , SVG
	ontario-icon-sentiment-5	PNG , SVG
	ontario-icon-vote-dislike	PNG , SVG
	ontario-icon-vote-like	PNG , SVG

How to use secondary icons

Copy and paste the SVG code for the main icon file. Include this in your code. Note that you will need to include the polyfill in order to make sure that icons render properly on IE11.

Load the secondary icons svg store from a self-hosted file or our CDN. Note that you will need to include the polyfill in order to make sure that icons render properly on IE11.

Load the icons, there are two options:
- Download the secondary icons file and host the file on your server or website
  Download secondary icons SVG store here
- Use our hosted file
  https://designsystem.ontario.ca/icons/ontario-icons-secondary.svg
Add the polyfill that fixes SVGs on IE and other older browsers.

<script defer="" src="https://designsystem.ontario.ca/scripts/svgxuse.js"></script>

Use the html SVG in your code
- If self-hosting the ontario-icons-secondary.svg, use the code below and adjust the xlink:href to the correct path:
  
  <svg class="ontario-icon" alt="" sol:category="accounts and web apps" aria-hidden="true" focusable="false" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" ><use href="../../icons/ontario-icons-secondary.svg#ontario-icon-account"></use></svg>
- To use our hosted secondary icons SVG file set the xlink:href, for example to: https://designsystem.ontario.ca/icons/ontario-icons-secondary.svg#ontario-icon-account
Add CSS class ontario-icon from the SCSS or Compiled CSS tab to your project’s CSS file.

Technical specifications (for both primary and secondary icons)

File type SVG

Size Minimum 16px
Maximum H1 (40px on desktop, 32px on mobile)

Hit size If the icon is clickable, the hit area should be at least 48px by 48px (see radio buttons for an example of where the hit size is larger than the element)

If the icon is a standalone component, it should have a hit area of 48px by 48px. If the icon is clickable and in line with text, it should be the same size as the font.

Colour

File type	SVG
Size	Minimum `16px` Maximum H1 (`40px` on desktop, `32px` on mobile)
Hit size	If the icon is clickable, the hit area should be at least `48px` by `48px` (see radio buttons for an example of where the hit size is larger than the element) If the icon is a standalone component, it should have a hit area of `48px` by `48px`. If the icon is clickable and in line with text, it should be the same size as the font.
Colour	Black: `#1A1A1A` White: `#FFFFFF` Grey: `#666666` Blue (if a link): Normal: `#0066CC` Hover: `#004E99` Visited: `#551A8B` Exceptions: some icons come with colours hard-coded into them. Do not override hard-coded icon colours. Examples include: alert icons (red, green and yellow) Visa, Mastercard, and Interac icons

Black: #1A1A1A
White: #FFFFFF
Grey: #666666
Blue (if a link):

Normal: #0066CC
Hover: #004E99
Visited: #551A8B

Exceptions: some icons come with colours hard-coded into them. Do not override hard-coded icon colours. Examples include:

alert icons (red, green and yellow)
Visa, Mastercard, and Interac icons

If you have any questions or feedback, please get in touch.