Icons

Reviewed

HTML
View
Context
Info
Notes


        
        <style>
    body {
        padding: 10px;
    }

    .icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

    .icons__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        width: 240px;
    }

    .icons__name,
    .icons__donwload {
        font-size: 0.75em;
        text-align: center;
    }

    .preview-icon.preview-icon {
        display: block;
        height: 40px;
        width: 40px;
        margin-bottom: 0.5rem;
    }
</style>
<div class="icons">
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_add_circle_black_24px"></use>
        </svg> <span class="icons__name">ic_add_circle_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_airplanemode_active_black_24px"></use>
        </svg> <span class="icons__name">ic_airplanemode_active_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
        </svg> <span class="icons__name">ic_arrow_drop_down_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
        </svg> <span class="icons__name">ic_arrow_drop_up_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_cancel_black_24px"></use>
        </svg> <span class="icons__name">ic_cancel_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_check_black_24px"></use>
        </svg> <span class="icons__name">ic_check_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_check_box_black_24px"></use>
        </svg> <span class="icons__name">ic_check_box_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_check_box_outline_blank_black_24px"></use>
        </svg> <span class="icons__name">ic_check_box_outline_blank_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_chevron_left_black_24px"></use>
        </svg> <span class="icons__name">ic_chevron_left_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_chevron_right_black_24px"></use>
        </svg> <span class="icons__name">ic_chevron_right_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_child_friendly_black_24px"></use>
        </svg> <span class="icons__name">ic_child_friendly_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_close_black_24px"></use>
        </svg> <span class="icons__name">ic_close_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_compare_arrows_black_24px"></use>
        </svg> <span class="icons__name">ic_compare_arrows_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_date_range_black_24px"></use>
        </svg> <span class="icons__name">ic_date_range_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_directions_bus_black_24px"></use>
        </svg> <span class="icons__name">ic_directions_bus_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_directions_car_black_24px"></use>
        </svg> <span class="icons__name">ic_directions_car_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_directions_railway_black_24px"></use>
        </svg> <span class="icons__name">ic_directions_railway_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_directions_walk_black_24px"></use>
        </svg> <span class="icons__name">ic_directions_walk_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_drive_eta_black_24px"></use>
        </svg> <span class="icons__name">ic_drive_eta_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_error_black_24px"></use>
        </svg> <span class="icons__name">ic_error_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_event_black_24px"></use>
        </svg> <span class="icons__name">ic_event_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_expand_less_black_24px"></use>
        </svg> <span class="icons__name">ic_expand_less_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_expand_more_black_24px"></use>
        </svg> <span class="icons__name">ic_expand_more_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_filter_list_black_24px"></use>
        </svg> <span class="icons__name">ic_filter_list_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_flight_land_black_24px"></use>
        </svg> <span class="icons__name">ic_flight_land_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_flight_takeoff_black_24px"></use>
        </svg> <span class="icons__name">ic_flight_takeoff_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_free_breakfast_black_24px"></use>
        </svg> <span class="icons__name">ic_free_breakfast_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_help_black_24px"></use>
        </svg> <span class="icons__name">ic_help_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_info_black_24px"></use>
        </svg> <span class="icons__name">ic_info_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_info_outline_black_24px"></use>
        </svg> <span class="icons__name">ic_info_outline_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_keyboard_arrow_down_black_24px"></use>
        </svg> <span class="icons__name">ic_keyboard_arrow_down_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_keyboard_arrow_right_black_24px"></use>
        </svg> <span class="icons__name">ic_keyboard_arrow_right_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_keyboard_arrow_up_black_24px"></use>
        </svg> <span class="icons__name">ic_keyboard_arrow_up_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_local_taxi_black_24px"></use>
        </svg> <span class="icons__name">ic_local_taxi_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_menu_black_24px"></use>
        </svg> <span class="icons__name">ic_menu_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_mode_edit_black_24px"></use>
        </svg> <span class="icons__name">ic_mode_edit_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_notifications_active_black_24px"></use>
        </svg> <span class="icons__name">ic_notifications_active_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_place_black_24px"></use>
        </svg> <span class="icons__name">ic_place_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_refresh_black_24px"></use>
        </svg> <span class="icons__name">ic_refresh_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_remove_circle_black_24px"></use>
        </svg> <span class="icons__name">ic_remove_circle_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_restaurant_menu_black_24px"></use>
        </svg> <span class="icons__name">ic_restaurant_menu_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_search_black_24px"></use>
        </svg> <span class="icons__name">ic_search_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_share_black_24px"></use>
        </svg> <span class="icons__name">ic_share_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_train_black_24px"></use>
        </svg> <span class="icons__name">ic_train_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_wc_black_24px"></use>
        </svg> <span class="icons__name">ic_wc_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_weekend_black_24px"></use>
        </svg> <span class="icons__name">ic_weekend_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_wifi_black_24px"></use>
        </svg> <span class="icons__name">ic_wifi_black_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-accessible-black-24px"></use>
        </svg> <span class="icons__name">ic-accessible-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-person-black-24px"></use>
        </svg> <span class="icons__name">ic-person-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-covered-parking-black-24px"></use>
        </svg> <span class="icons__name">ic-covered-parking-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-man-black-24px"></use>
        </svg> <span class="icons__name">ic-man-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-print-black-24px"></use>
        </svg> <span class="icons__name">ic-print-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-parking-sign-24px"></use>
        </svg> <span class="icons__name">ic-parking-sign-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-wheel-24px"></use>
        </svg> <span class="icons__name">ic-wheel-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-facebook"></use>
        </svg> <span class="icons__name">ic-social-facebook</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-linkedin"></use>
        </svg> <span class="icons__name">ic-social-linkedin</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-twitter"></use>
        </svg> <span class="icons__name">ic-social-twitter</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-instagram"></use>
        </svg> <span class="icons__name">ic-social-instagram</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-youtube"></use>
        </svg> <span class="icons__name">ic-social-youtube</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-email-black-24px"></use>
        </svg> <span class="icons__name">ic-email-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#uscita-parcheggio-24px"></use>
        </svg> <span class="icons__name">uscita-parcheggio-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#entrata-parcheggio-24px"></use>
        </svg> <span class="icons__name">entrata-parcheggio-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-star-new-black-18px"></use>
        </svg> <span class="icons__name">ic-star-new-black-18px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-affiliatecard-24px"></use>
        </svg> <span class="icons__name">ic-affiliatecard-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-ticket-24px"></use>
        </svg> <span class="icons__name">ic-ticket-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-mq-room-24px"></use>
        </svg> <span class="icons__name">ic-mq-room-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-switch-arrows-black-24px"></use>
        </svg> <span class="icons__name">ic-switch-arrows-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-call-black-24px"></use>
        </svg> <span class="icons__name">ic-call-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-work-black-24px"></use>
        </svg> <span class="icons__name">ic-work-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-baseline-airline-seat-recline-extra-24px"></use>
        </svg> <span class="icons__name">ic-baseline-airline-seat-recline-extra-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-baseline-lock-24px"></use>
        </svg> <span class="icons__name">ic-baseline-lock-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-sun-black"></use>
        </svg> <span class="icons__name">ic-sun-black</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-eye-black-24px"></use>
        </svg> <span class="icons__name">ic-eye-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-bagaglio-stiva-24px"></use>
        </svg> <span class="icons__name">ic-bagaglio-stiva-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-shopping-black-24px"></use>
        </svg> <span class="icons__name">ic-shopping-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-pan-tool-24px"></use>
        </svg> <span class="icons__name">ic-pan-tool-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-document-24px"></use>
        </svg> <span class="icons__name">ic-document-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-boarding-24px"></use>
        </svg> <span class="icons__name">ic-boarding-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-no-eye-black-24px"></use>
        </svg> <span class="icons__name">ic-no-eye-black-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-zoom-24px"></use>
        </svg> <span class="icons__name">ic-zoom-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-zoom-out-24px"></use>
        </svg> <span class="icons__name">ic-zoom-out-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-confirm-24px"></use>
        </svg> <span class="icons__name">ic-confirm-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-Customer-care-24px"></use>
        </svg> <span class="icons__name">ic-Customer-care-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-event-seat-24px"></use>
        </svg> <span class="icons__name">ic-event-seat-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-gift-25px"></use>
        </svg> <span class="icons__name">ic-gift-25px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-people-24px"></use>
        </svg> <span class="icons__name">ic-people-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-more-horiz-24px"></use>
        </svg> <span class="icons__name">ic-more-horiz-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-fashion-24px"></use>
        </svg> <span class="icons__name">ic-fashion-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-bank-24px"></use>
        </svg> <span class="icons__name">ic-bank-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-deposito-bagagli-24px"></use>
        </svg> <span class="icons__name">ic-deposito-bagagli-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-pharmacy-24px"></use>
        </svg> <span class="icons__name">ic-pharmacy-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-download-24px"></use>
        </svg> <span class="icons__name">ic-download-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-google-plus"></use>
        </svg> <span class="icons__name">ic-google-plus</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-social-wechat"></use>
        </svg> <span class="icons__name">ic-social-wechat</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-lifesaver-32px"></use>
        </svg> <span class="icons__name">ic-lifesaver-32px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-map-24px"></use>
        </svg> <span class="icons__name">ic-map-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-lost-baggage-24px"></use>
        </svg> <span class="icons__name">ic-lost-baggage-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-lost-object-24px"></use>
        </svg> <span class="icons__name">ic-lost-object-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-marconi-express-24px"></use>
        </svg> <span class="icons__name">ic-marconi-express-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-euro-symbol-24px"></use>
        </svg> <span class="icons__name">ic-euro-symbol-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-shuffle-24px"></use>
        </svg> <span class="icons__name">ic-shuffle-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-bagaglio-stiva-24px"></use>
        </svg> <span class="icons__name">ic-bagaglio-stiva-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-no-bagaglio-stiva-24px"></use>
        </svg> <span class="icons__name">ic-no-bagaglio-stiva-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-schedule-24px"></use>
        </svg> <span class="icons__name">ic-schedule-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-virtual-tour-24px"></use>
        </svg> <span class="icons__name">ic-virtual-tour-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-messenger"></use>
        </svg> <span class="icons__name">ic-messenger</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-bell"></use>
        </svg> <span class="icons__name">ic-bell</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-user"></use>
        </svg> <span class="icons__name">ic-user</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-user-white"></use>
        </svg> <span class="icons__name">ic-user-white</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-plane"></use>
        </svg> <span class="icons__name">ic-plane</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-passenger"></use>
        </svg> <span class="icons__name">ic-passenger</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-pin-map"></use>
        </svg> <span class="icons__name">ic-pin-map</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-trash"></use>
        </svg> <span class="icons__name">ic-trash</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-info-serif"></use>
        </svg> <span class="icons__name">ic-info-serif</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-qrcode-24px"></use>
        </svg> <span class="icons__name">ic-qrcode-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_special-assistance_24"></use>
        </svg> <span class="icons__name">ic_special-assistance_24</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_amazon_24px"></use>
        </svg> <span class="icons__name">ic_amazon_24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic_fb_messenger"></use>
        </svg> <span class="icons__name">ic_fb_messenger</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-tune-24px"></use>
        </svg> <span class="icons__name">ic-tune-24px</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#ic-link-24px"></use>
        </svg> <span class="icons__name">ic-link-24px</span>
    </div>
</div>


        <style>
	body{
		padding: 10px;
	}
  .icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    margin: 0 auto;
  }

  .icons__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    width: 240px;
  }

  .icons__name,
  .icons__donwload {
    font-size: 0.75em;
    text-align: center;
  }

  .preview-icon.preview-icon {
    display: block;
    height: 40px;
    width: 40px;
    margin-bottom: 0.5rem;
  }
</style>
<div class="icons">
  {{#each icons}}
    <div class="icons__wrapper">
      {{> @icon
        symbol=this.symbol
        class="preview-icon"
      }}
      <span class="icons__name">{{ this.symbol }}</span>
    </div>
  {{/each}}
</div>


        
            
            {
  "icons": [
    {
      "symbol": "ic_add_circle_black_24px"
    },
    {
      "symbol": "ic_airplanemode_active_black_24px"
    },
    {
      "symbol": "ic_arrow_drop_down_black_24px"
    },
    {
      "symbol": "ic_arrow_drop_up_black_24px"
    },
    {
      "symbol": "ic_cancel_black_24px"
    },
    {
      "symbol": "ic_check_black_24px"
    },
    {
      "symbol": "ic_check_box_black_24px"
    },
    {
      "symbol": "ic_check_box_outline_blank_black_24px"
    },
    {
      "symbol": "ic_chevron_left_black_24px"
    },
    {
      "symbol": "ic_chevron_right_black_24px"
    },
    {
      "symbol": "ic_child_friendly_black_24px"
    },
    {
      "symbol": "ic_close_black_24px"
    },
    {
      "symbol": "ic_compare_arrows_black_24px"
    },
    {
      "symbol": "ic_date_range_black_24px"
    },
    {
      "symbol": "ic_directions_bus_black_24px"
    },
    {
      "symbol": "ic_directions_car_black_24px"
    },
    {
      "symbol": "ic_directions_railway_black_24px"
    },
    {
      "symbol": "ic_directions_walk_black_24px"
    },
    {
      "symbol": "ic_drive_eta_black_24px"
    },
    {
      "symbol": "ic_error_black_24px"
    },
    {
      "symbol": "ic_event_black_24px"
    },
    {
      "symbol": "ic_expand_less_black_24px"
    },
    {
      "symbol": "ic_expand_more_black_24px"
    },
    {
      "symbol": "ic_filter_list_black_24px"
    },
    {
      "symbol": "ic_flight_land_black_24px"
    },
    {
      "symbol": "ic_flight_takeoff_black_24px"
    },
    {
      "symbol": "ic_free_breakfast_black_24px"
    },
    {
      "symbol": "ic_help_black_24px"
    },
    {
      "symbol": "ic_info_black_24px"
    },
    {
      "symbol": "ic_info_outline_black_24px"
    },
    {
      "symbol": "ic_keyboard_arrow_down_black_24px"
    },
    {
      "symbol": "ic_keyboard_arrow_right_black_24px"
    },
    {
      "symbol": "ic_keyboard_arrow_up_black_24px"
    },
    {
      "symbol": "ic_local_taxi_black_24px"
    },
    {
      "symbol": "ic_menu_black_24px"
    },
    {
      "symbol": "ic_mode_edit_black_24px"
    },
    {
      "symbol": "ic_notifications_active_black_24px"
    },
    {
      "symbol": "ic_place_black_24px"
    },
    {
      "symbol": "ic_refresh_black_24px"
    },
    {
      "symbol": "ic_remove_circle_black_24px"
    },
    {
      "symbol": "ic_restaurant_menu_black_24px"
    },
    {
      "symbol": "ic_search_black_24px"
    },
    {
      "symbol": "ic_share_black_24px"
    },
    {
      "symbol": "ic_train_black_24px"
    },
    {
      "symbol": "ic_wc_black_24px"
    },
    {
      "symbol": "ic_weekend_black_24px"
    },
    {
      "symbol": "ic_wifi_black_24px"
    },
    {
      "symbol": "ic-accessible-black-24px"
    },
    {
      "symbol": "ic-person-black-24px"
    },
    {
      "symbol": "ic-covered-parking-black-24px"
    },
    {
      "symbol": "ic-man-black-24px"
    },
    {
      "symbol": "ic-print-black-24px"
    },
    {
      "symbol": "ic-parking-sign-24px"
    },
    {
      "symbol": "ic-wheel-24px"
    },
    {
      "symbol": "ic-social-facebook"
    },
    {
      "symbol": "ic-social-linkedin"
    },
    {
      "symbol": "ic-social-twitter"
    },
    {
      "symbol": "ic-social-instagram"
    },
    {
      "symbol": "ic-social-youtube"
    },
    {
      "symbol": "ic-email-black-24px"
    },
    {
      "symbol": "uscita-parcheggio-24px"
    },
    {
      "symbol": "entrata-parcheggio-24px"
    },
    {
      "symbol": "ic-star-new-black-18px"
    },
    {
      "symbol": "ic-affiliatecard-24px"
    },
    {
      "symbol": "ic-ticket-24px"
    },
    {
      "symbol": "ic-mq-room-24px"
    },
    {
      "symbol": "ic-switch-arrows-black-24px"
    },
    {
      "symbol": "ic-call-black-24px"
    },
    {
      "symbol": "ic-work-black-24px"
    },
    {
      "symbol": "ic-baseline-airline-seat-recline-extra-24px"
    },
    {
      "symbol": "ic-baseline-lock-24px"
    },
    {
      "symbol": "ic-sun-black"
    },
    {
      "symbol": "ic-eye-black-24px"
    },
    {
      "symbol": "ic-bagaglio-stiva-24px"
    },
    {
      "symbol": "ic-shopping-black-24px"
    },
    {
      "symbol": "ic-pan-tool-24px"
    },
    {
      "symbol": "ic-document-24px"
    },
    {
      "symbol": "ic-boarding-24px"
    },
    {
      "symbol": "ic-no-eye-black-24px"
    },
    {
      "symbol": "ic-zoom-24px"
    },
    {
      "symbol": "ic-zoom-out-24px"
    },
    {
      "symbol": "ic-confirm-24px"
    },
    {
      "symbol": "ic-Customer-care-24px"
    },
    {
      "symbol": "ic-event-seat-24px"
    },
    {
      "symbol": "ic-gift-25px"
    },
    {
      "symbol": "ic-people-24px"
    },
    {
      "symbol": "ic-more-horiz-24px"
    },
    {
      "symbol": "ic-fashion-24px"
    },
    {
      "symbol": "ic-bank-24px"
    },
    {
      "symbol": "ic-deposito-bagagli-24px"
    },
    {
      "symbol": "ic-pharmacy-24px"
    },
    {
      "symbol": "ic-download-24px"
    },
    {
      "symbol": "ic-google-plus"
    },
    {
      "symbol": "ic-social-wechat"
    },
    {
      "symbol": "ic-lifesaver-32px"
    },
    {
      "symbol": "ic-map-24px"
    },
    {
      "symbol": "ic-lost-baggage-24px"
    },
    {
      "symbol": "ic-lost-object-24px"
    },
    {
      "symbol": "ic-marconi-express-24px"
    },
    {
      "symbol": "ic-euro-symbol-24px"
    },
    {
      "symbol": "ic-shuffle-24px"
    },
    {
      "symbol": "ic-bagaglio-stiva-24px"
    },
    {
      "symbol": "ic-no-bagaglio-stiva-24px"
    },
    {
      "symbol": "ic-schedule-24px"
    },
    {
      "symbol": "ic-virtual-tour-24px"
    },
    {
      "symbol": "ic-messenger"
    },
    {
      "symbol": "ic-bell"
    },
    {
      "symbol": "ic-user"
    },
    {
      "symbol": "ic-user-white"
    },
    {
      "symbol": "ic-plane"
    },
    {
      "symbol": "ic-passenger"
    },
    {
      "symbol": "ic-pin-map"
    },
    {
      "symbol": "ic-trash"
    },
    {
      "symbol": "ic-info-serif"
    },
    {
      "symbol": "ic-qrcode-24px"
    },
    {
      "symbol": "ic_special-assistance_24"
    },
    {
      "symbol": "ic_amazon_24px"
    },
    {
      "symbol": "ic_fb_messenger"
    },
    {
      "symbol": "ic-tune-24px"
    },
    {
      "symbol": "ic-link-24px"
    }
  ]
}

Handle: @icons
Preview:
- With layout
- Component only
Filesystem Path: src/views/01-atoms/icons/icons.hbs
References (1): @icon

No notes defined.