Logo
Stockholm-icons / Shopping / Cart3 Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Hi, Sean S

Base Examples

Flaticon icons 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

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
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
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo