Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.

Base Examples

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

Warning: file_get_contents(/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/../../tools/node_modules/socicon/css/socicon.css): Failed to open stream: No such file or directory in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php on line 370

Fatal error: Uncaught TypeError: array_chunk(): Argument #1 ($array) must be of type array, null given in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php:308 Stack trace: #0 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(308): array_chunk() #1 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(289): SociconsIcons::render() #2 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(282): SociconsIcons::getCache() #3 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php(383): SociconsIcons::init() #4 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #5 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(114): Util::getView() #6 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/inc/view/demos/layout/content.php(27): Page::getPageView() #7 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #8 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(92): Util::getView() #9 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/inc/view/demos/layout/layout.php(21): Page::getLayoutPartialView() #10 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #11 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(88): Util::getView() #12 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/base/default.php(78): Page::getLayoutView() #13 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Util.php(25): include('...') #14 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(83): Util::getView() #15 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/lib/Page.php(58): Page::getBaseView() #16 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/run.php(66): Page::run() #17 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/index.php(19): include('...') #18 /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/index.php(7): include('...') #19 {main} thrown in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo1/dist/inc/view/demos/pages/features/icons/socicons.php on line 308