Logo

Base Examples

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


                        <i class="socicon-vimeo mr-5"></i>
                        <i class="socicon-telegram mr-5"></i>
                        <i class="socicon-facebook mr-5"></i>
                        <i class="socicon-android mr-5"></i>
                        <i class="socicon-amazon mr-5"></i>
                        <i class="socicon-google"></i>
                        

Color Options

Use .icon-{color}class format to set different colors.


                        <i class="socicon-vimeo text-success mr-5"></i>
                        <i class="socicon-telegram text-primary mr-5"></i>
                        <i class="socicon-facebook text-danger mr-5"></i>
                        <i class="socicon-android text-warning mr-5"></i>
                        <i class="socicon-amazon text-info mr-5"></i>
                        <i class="socicon-google text-dark"></i>
                        

Sizes

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


                        <i class="socicon-android icon-xs"></i>
                        <i class="socicon-android icon-sm"></i>
                        <i class="socicon-android icon-nm"></i>
                        <i class="socicon-android icon-md"></i>
                        <i class="socicon-android icon-lg"></i>
                        <i class="socicon-android icon-xl"></i>
                        <i class="socicon-android icon-2x"></i>
                        <i class="socicon-android icon-3x"></i>
                        <i class="socicon-android icon-4x"></i>
                        <i class="socicon-android icon-5x"></i>
                        <i class="socicon-android icon-6x"></i>
                        <i class="socicon-android icon-7x"></i>
                        <i class="socicon-android icon-8x"></i>
                        <i class="socicon-android icon-9x"></i>
                        <i class="socicon-android 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="socicon-foursquare"></i> Button example
                        </a>

                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">
                            <i class="socicon-skype"></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="socicon-airbnb"></i> Dropdown example
                            </a>
                            <div class="dropdown-menu dropdown-menu-md py-5" style="">
                                <ul class="navi navi-hover">
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><i class="socicon-chrome 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="socicon-dribbble 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="socicon-apple 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="socicon-envato text-primary"></i></span>
                                            <span class="navi-text">Orders</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        

Socicons

socicon-modelmayhem
socicon-mixcloud
socicon-drupal
socicon-swarm
socicon-istock
socicon-yammer
socicon-ello
socicon-stackoverflow
socicon-persona
socicon-triplej
socicon-houzz
socicon-rss
socicon-paypal
socicon-odnoklassniki
socicon-airbnb
socicon-periscope
socicon-outlook
socicon-coderwall
socicon-tripadvisor
socicon-appnet
socicon-goodreads
socicon-tripit
socicon-lanyrd
socicon-slideshare
socicon-buffer
socicon-disqus
socicon-vkontakte
socicon-whatsapp
socicon-patreon
socicon-storehouse
socicon-pocket
socicon-mail
socicon-blogger
socicon-technorati
socicon-reddit
socicon-dribbble
socicon-stumbleupon
socicon-digg
socicon-envato
socicon-behance
socicon-delicious
socicon-deviantart
socicon-forrst
socicon-play
socicon-zerply
socicon-wikipedia
socicon-apple
socicon-flattr
socicon-github
socicon-renren
socicon-friendfeed
socicon-newsvine
socicon-identica
socicon-bebo
socicon-zynga
socicon-steam
socicon-xbox
socicon-windows
socicon-qq
socicon-douban
socicon-meetup
socicon-playstation
socicon-android
socicon-snapchat
socicon-twitter
socicon-facebook
socicon-googleplus
socicon-pinterest
socicon-foursquare
socicon-yahoo
socicon-skype
socicon-yelp
socicon-feedburner
socicon-linkedin
socicon-viadeo
socicon-xing
socicon-myspace
socicon-soundcloud
socicon-spotify
socicon-grooveshark
socicon-lastfm
socicon-youtube
socicon-vimeo
socicon-dailymotion
socicon-vine
socicon-flickr
socicon-500px
socicon-wordpress
socicon-tumblr
socicon-twitch
socicon-8tracks
socicon-amazon
socicon-icq
socicon-smugmug
socicon-ravelry
socicon-weibo
socicon-baidu
socicon-angellist
socicon-ebay
socicon-imdb
socicon-stayfriends
socicon-residentadvisor
socicon-google
socicon-yandex
socicon-sharethis
socicon-bandcamp
socicon-itunes
socicon-deezer
socicon-telegram
socicon-openid
socicon-amplement
socicon-viber
socicon-zomato
socicon-draugiem
socicon-endomodo
socicon-filmweb
socicon-stackexchange
socicon-wykop
socicon-teamspeak
socicon-teamviewer
socicon-ventrilo
socicon-younow
socicon-raidcall
socicon-mumble
socicon-medium
socicon-bebee
socicon-hitbox
socicon-reverbnation
socicon-formulr
socicon-instagram
socicon-battlenet
socicon-chrome
socicon-discord
socicon-issuu
socicon-macos
socicon-firefox
socicon-opera
socicon-keybase
socicon-alliance
socicon-livejournal
socicon-googlephotos
socicon-horde
socicon-etsy
socicon-zapier
socicon-google-scholar
socicon-researchgate
socicon-wechat
socicon-strava
socicon-line
socicon-lyft
socicon-uber
socicon-songkick
socicon-viewbug
socicon-googlegroups
socicon-quora
socicon-diablo
socicon-blizzard
socicon-hearthstone
socicon-heroes
socicon-overwatch
socicon-warcraft
socicon-starcraft
socicon-beam
socicon-curse
socicon-player
socicon-streamjar
socicon-nintendo
socicon-hellocoton

Notifications 24 New

Quick Actions finance & reports

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%

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