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 .text-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25}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

Warning /var/www/preview.keenthemes.com/metronic/releases/2020-07-07-181510/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php 364

Notifications 24 New

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