Logo

Base Examples

Flaticonicons can be used as through class names as shown below.


                        <i class="flaticon2-bell-4"></i>
                        <i class="flaticon2-gear"></i>
                        <i class="flaticon2-pen"></i>
                        <i class="flaticon2-open-box"></i>
                        <i class="flaticon2-hourglass-1"></i>
                        <i class="flaticon2-graph-1"></i>
                        

Color Options

Use .text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25}class format to set different colors.


                        <i class="flaticon2-bell-4 text-success"></i>
                        <i class="flaticon2-gear text-primary"></i>
                        <i class="flaticon2-pen text-danger"></i>
                        <i class="flaticon2-open-box text-warning"></i>
                        <i class="flaticon2-hourglass-1 text-info"></i>
                        <i class="flaticon2-graph-1 text-dark"></i>
                        

Sizes

Use .icon-{size}class format to set different sizes.


                        <i class="flaticon2-hourglass-1 icon-xs"></i>
                        <i class="flaticon2-hourglass-1 icon-sm"></i>
                        <i class="flaticon2-hourglass-1 icon-nm"></i>
                        <i class="flaticon2-hourglass-1 icon-md"></i>
                        <i class="flaticon2-hourglass-1 icon-lg"></i>
                        <i class="flaticon2-hourglass-1 icon-xl"></i>
                        <i class="flaticon2-hourglass-1 icon-2x"></i>
                        <i class="flaticon2-hourglass-1 icon-3x"></i>
                        <i class="flaticon2-hourglass-1 icon-4x"></i>
                        <i class="flaticon2-hourglass-1 icon-5x"></i>
                        <i class="flaticon2-hourglass-1 icon-6x"></i>
                        <i class="flaticon2-hourglass-1 icon-7x"></i>
                        <i class="flaticon2-hourglass-1 icon-8x"></i>
                        <i class="flaticon2-hourglass-1 icon-9x"></i>
                        <i class="flaticon2-hourglass-1 icon-10x"></i>
                        

Integration

You can use Flaticons literally with any element within Metronic.


                        <a href="#" class="btn btn-success font-weight-bold mr-2">
                            <i class="flaticon2-bell-4"></i> Button example
                        </a>

                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">
                            <i class="flaticon2-open-box"></i> Button example 2
                        </a>

                        <div class="dropdown dropdown-inline">
                            <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="flaticon2-graph-1"></i> Dropdown example
                            </a>
                            <div class="dropdown-menu dropdown-menu-md py-5">
                                <ul class="navi navi-hover">
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="flaticon2-analytics text-danger"></i></span>
                                            <span class="navi-text">Messages</span>
                                            <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="flaticon2-pie-chart-2  text-warning"></i></span>
                                            <span class="navi-text">Settings</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="flaticon2-box-1  text-success"></i></span>
                                            <span class="navi-text">Tasks</span>
                                            <span class="navi-label">
                                                <span class="label label-warning label-rounded">5</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="flaticon2-file  text-primary"></i></span>
                                            <span class="navi-text">Orders</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        

Flaticon Icons

flaticon-email-black-circular-button
flaticon-map
flaticon-alert-off
flaticon-alert
flaticon-computer
flaticon-responsive
flaticon-presentation
flaticon-arrows
flaticon-rocket
flaticon-reply
flaticon-gift
flaticon-confetti
flaticon-piggy-bank
flaticon-support
flaticon-delete
flaticon-eye
flaticon-multimedia
flaticon-whatsapp
flaticon-multimedia-2
flaticon-email
flaticon-presentation-1
flaticon-trophy
flaticon-psd
flaticon-layer
flaticon-doc
flaticon-file
flaticon-network
flaticon-bus-stop
flaticon-globe
flaticon-upload
flaticon-squares
flaticon-technology
flaticon-up-arrow
flaticon-browser
flaticon-speech-bubble
flaticon-coins
flaticon-open-box
flaticon-speech-bubble-1
flaticon-attachment
flaticon-photo-camera
flaticon-skype-logo
flaticon-linkedin-logo
flaticon-twitter-logo
flaticon-facebook-letter-logo
flaticon-calendar-with-a-clock-time-tools
flaticon-youtube
flaticon-add-circular-button
flaticon-more-v2
flaticon-search
flaticon-search-magnifier-interface-symbol
flaticon-questions-circular-button
flaticon-refresh
flaticon-logout
flaticon-event-calendar-symbol
flaticon-laptop
flaticon-tool
flaticon-graphic
flaticon-symbol
flaticon-graphic-1
flaticon-clock
flaticon-squares-1
flaticon-black
flaticon-book
flaticon-cogwheel
flaticon-exclamation
flaticon-add-label-button
flaticon-delete-1
flaticon-interface
flaticon-more
flaticon-warning-sign
flaticon-calendar
flaticon-instagram-logo
flaticon-linkedin
flaticon-facebook-logo-button
flaticon-twitter-logo-button
flaticon-cancel
flaticon-exclamation-square
flaticon-buildings
flaticon-danger
flaticon-technology-1
flaticon-letter-g
flaticon-interface-1
flaticon-circle
flaticon-pin
flaticon-close
flaticon-clock-1
flaticon-apps
flaticon-user
flaticon-menu-button
flaticon-settings
flaticon-home
flaticon-clock-2
flaticon-lifebuoy
flaticon-cogwheel-1
flaticon-paper-plane
flaticon-statistics
flaticon-diagram
flaticon-line-graph
flaticon-customer
flaticon-visible
flaticon-shopping-basket
flaticon-price-tag
flaticon-businesswoman
flaticon-medal
flaticon-like
flaticon-edit
flaticon-avatar
flaticon-download
flaticon-home-1
flaticon-mail
flaticon-mail-1
flaticon-warning
flaticon-cart
flaticon-bag
flaticon-pie-chart
flaticon-graph
flaticon-interface-2
flaticon-chat
flaticon-envelope
flaticon-chat-1
flaticon-interface-3
flaticon-background
flaticon-file-1
flaticon-interface-4
flaticon-multimedia-3
flaticon-list
flaticon-time
flaticon-profile
flaticon-imac
flaticon-medical
flaticon-music
flaticon-plus
flaticon-exclamation-1
flaticon-info
flaticon-menu-1
flaticon-menu-2
flaticon-share
flaticon-interface-5
flaticon-signs
flaticon-tabs
flaticon-multimedia-4
flaticon-upload-1
flaticon-web
flaticon-placeholder
flaticon-placeholder-1
flaticon-layers
flaticon-interface-6
flaticon-interface-7
flaticon-interface-8
flaticon-tool-1
flaticon-settings-1
flaticon-alarm
flaticon-search-1
flaticon-time-1
flaticon-stopwatch
flaticon-folder
flaticon-folder-1
flaticon-folder-2
flaticon-folder-3
flaticon-file-2
flaticon-list-1
flaticon-list-2
flaticon-calendar-1
flaticon-time-2
flaticon-interface-9
flaticon-app
flaticon-suitcase
flaticon-grid-menu-v2
flaticon-more-v6
flaticon-more-v5
flaticon-add
flaticon-multimedia-5
flaticon-more-v4
flaticon-placeholder-2
flaticon-map-location
flaticon-users
flaticon-profile-1
flaticon-lock
flaticon-sound
flaticon-star
flaticon-placeholder-3
flaticon-bell
flaticon-paper-plane-1
flaticon-users-1
flaticon-more-1
flaticon-up-arrow-1
flaticon-grid-menu
flaticon-alarm-1
flaticon-earth-globe
flaticon-alert-1
flaticon-internet
flaticon-user-ok
flaticon-user-add
flaticon-user-settings
flaticon-truck
flaticon-analytics
flaticon-notes
flaticon-tea-cup
flaticon-exclamation-2
flaticon-technology-2
flaticon-location
flaticon-edit-1
flaticon-home-2
flaticon-dashboard
flaticon-information
flaticon-light
flaticon-car
flaticon-business
flaticon-squares-2
flaticon-signs-1
flaticon-mark
flaticon-squares-3
flaticon-comment
flaticon-shapes
flaticon-clipboard
flaticon-squares-4
flaticon-delete-2
flaticon-bell-1
flaticon-list-3
flaticon-infinity
flaticon-chat-2
flaticon-calendar-2
flaticon-signs-2
flaticon-time-3
flaticon-calendar-3
flaticon-interface-10
flaticon-interface-11
flaticon-folder-4
flaticon-alert-2
flaticon-cogwheel-2
flaticon-graphic-2
flaticon-rotate
flaticon-feed
flaticon-safe-shield-protection
flaticon-security
flaticon-download-1
flaticon-pie-chart-1
flaticon-notepad
flaticon2-notification
flaticon2-settings
flaticon2-search
flaticon2-delete
flaticon2-psd
flaticon2-list
flaticon2-box
flaticon2-download
flaticon2-shield
flaticon2-paperplane
flaticon2-avatar
flaticon2-bell
flaticon2-fax
flaticon2-chart2
flaticon2-supermarket
flaticon2-phone
flaticon2-envelope
flaticon2-pin
flaticon2-chat
flaticon2-chart
flaticon2-infographic
flaticon2-grids
flaticon2-menu
flaticon2-plus
flaticon2-list-1
flaticon2-talk
flaticon2-file
flaticon2-user
flaticon2-line-chart
flaticon2-percentage
flaticon2-menu-1
flaticon2-paper-plane
flaticon2-menu-2
flaticon2-shopping-cart
flaticon2-pie-chart
flaticon2-box-1
flaticon2-map
flaticon2-favourite
flaticon2-checking
flaticon2-safe
flaticon2-heart-rate-monitor
flaticon2-layers
flaticon2-delivery-package
flaticon2-sms
flaticon2-image-file
flaticon2-plus-1
flaticon2-send
flaticon2-graphic-design
flaticon2-cup
flaticon2-website
flaticon2-gift
flaticon2-chronometer
flaticon2-browser
flaticon2-digital-marketing
flaticon2-calendar
flaticon2-calendar-1
flaticon2-rocket
flaticon2-analytics
flaticon2-pie-chart-1
flaticon2-pie-chart-2
flaticon2-analytics-1
flaticon2-google-drive-file
flaticon2-pie-chart-3
flaticon2-poll-symbol
flaticon2-gear
flaticon2-magnifier-tool
flaticon2-add
flaticon2-cube
flaticon2-gift-1
flaticon2-list-2
flaticon2-shopping-cart-1
flaticon2-calendar-2
flaticon2-laptop
flaticon2-cube-1
flaticon2-layers-1
flaticon2-chat-1
flaticon2-copy
flaticon2-paper
flaticon2-hospital
flaticon2-calendar-3
flaticon2-speaker
flaticon2-pie-chart-4
flaticon2-schedule
flaticon2-expand
flaticon2-menu-3
flaticon2-download-1
flaticon2-help
flaticon2-list-3
flaticon2-notepad
flaticon2-graph
flaticon2-browser-1
flaticon2-photograph
flaticon2-browser-2
flaticon2-hourglass
flaticon2-mail
flaticon2-cardiogram
flaticon2-document
flaticon2-contract
flaticon2-graph-1
flaticon2-graphic
flaticon2-position
flaticon2-soft-icons
flaticon2-circle-vol-2
flaticon2-rocket-1
flaticon2-lorry
flaticon2-cd
flaticon2-file-1
flaticon2-reload
flaticon2-placeholder
flaticon2-refresh
flaticon2-medical-records
flaticon2-rectangular
flaticon2-medical-records-1
flaticon2-indent-dots
flaticon2-search-1
flaticon2-edit
flaticon2-new-email
flaticon2-calendar-4
flaticon2-console
flaticon2-open-text-book
flaticon2-download-2
flaticon2-zig-zag-line-sign
flaticon2-tools-and-utensils
flaticon2-crisp-icons
flaticon2-trash
flaticon2-lock
flaticon2-bell-1
flaticon2-setup
flaticon2-menu-4
flaticon2-architecture-and-city
flaticon2-shelter
flaticon2-add-1
flaticon2-checkmark
flaticon2-circular-arrow
flaticon2-user-outline-symbol
flaticon2-rhombus
flaticon2-crisp-icons-1
flaticon2-soft-icons-1
flaticon2-hexagonal
flaticon2-time
flaticon2-contrast
flaticon2-telegram-logo
flaticon2-hangouts-logo
flaticon2-analytics-2
flaticon2-wifi
flaticon2-protected
flaticon2-drop
flaticon2-mail-1
flaticon2-delivery-truck
flaticon2-writing
flaticon2-calendar-5
flaticon2-protection
flaticon2-calendar-6
flaticon2-calendar-7
flaticon2-calendar-8
flaticon2-bell-2
flaticon2-hourglass-1
flaticon2-next
flaticon2-chat-2
flaticon2-correct
flaticon2-photo-camera
flaticon2-fast-next
flaticon2-fast-back
flaticon2-down
flaticon2-back
flaticon2-up
flaticon2-arrow-down
flaticon2-arrow-up
flaticon2-accept
flaticon2-sort
flaticon2-arrow
flaticon2-back-1
flaticon2-add-square
flaticon2-quotation-mark
flaticon2-clip-symbol
flaticon2-check-mark
flaticon2-folder
flaticon2-cancel-music
flaticon2-cross
flaticon2-pen
flaticon2-email
flaticon2-graph-2
flaticon2-open-box
flaticon2-files-and-folders
flaticon2-ui
flaticon2-sheet
flaticon2-dashboard
flaticon2-user-1
flaticon2-group
flaticon2-black-back-closed-envelope-shape
flaticon2-left-arrow
flaticon2-sort-alphabetically
flaticon2-sort-down
flaticon2-rubbish-bin
flaticon2-rubbish-bin-delete-button
flaticon2-calendar-9
flaticon2-tag
flaticon2-refresh-button
flaticon2-refresh-arrow
flaticon2-reload-1
flaticon2-refresh-1
flaticon2-left-arrow-1
flaticon2-reply
flaticon2-reply-1
flaticon2-printer
flaticon2-print
flaticon2-shrink
flaticon2-resize
flaticon2-arrow-1
flaticon2-size
flaticon2-arrow-2
flaticon2-cancel
flaticon2-exclamation
flaticon2-line
flaticon2-warning
flaticon2-information
flaticon2-layers-2
flaticon2-file-2
flaticon2-bell-3
flaticon2-bell-4
flaticon2-bell-5
flaticon2-bell-alarm-symbol
flaticon2-world
flaticon2-graphic-1
flaticon2-send-1
flaticon2-location
flaticon2-pin-1
flaticon2-start-up
flaticon2-right-arrow

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30