Perfect Icons is moving!

Perfect icons will be moving to a new domain http://socialicons.io/. Please update your bookmarks or saved link to continue using Perfect Icons.

Close

Perfect Icons

The easiest way to create resolution independent social icons.

Usage

1 Download the font files in the zip file below. Extract and upload to your web directory.

socicon.zip

2 Add the following CSS to your stylesheet and set the correct path to the font files.

@font-face {
    font-family: 'si';
    src: url('PATH_TO/socicon.eot');
    src: url('PATH_TO/socicon.eot?#iefix') format('embedded-opentype'),
         url('PATH_TO/socicon.woff') format('woff'),
         url('PATH_TO/socicon.ttf') format('truetype'),
         url('PATH_TO/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(PATH_TO/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
-o-transition:.1s; -ms-transition:.1s; -moz-transition:.1s; -webkit-transition:.1s; transition:.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0);
overflow:hidden; text-decoration:none; text-align:center; display:block; position: relative; z-index: 1; width: 80px; height: 80px; line-height: 80px; font-size: 44px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-right: 10px; color: #ffffff; background-color: transparent; }
.soc a:hover { z-index: 2; }
.soc-icon-last{ margin:0 !important; }

3 Place the following HTML where you would like the icons to show.


                    

That's it! Now you have perfect icons on your website. Help other people put perfect icons on their site by sharing below.