Different ways to style the icons with CSS

All trademarks, logos, and brands are property of their respective owners. The company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not indicate endorsement of the trademark holder by 525icons, nor vice versa.


ico-spinner ux-spin

ico-circle-o-notch ux-spin

ico-spinner ux-spin

ico-refresh ux-spin

ico-spinner3 ux-spin

Flip horizontal and vertical

Here we use three classes in order to flip an icon horizontal, vertical and both. The classnames are: 'flip-h', 'flip-v' and 'flip-h-v'.

ico-thumbs-up normal

ico-thumbs-up flip-v

ico-thumbs-up flip-h

ico-thumbs-up flip-h-v

Stacked icons

(Mouse-over the calendar to see the current date)

ico-lock on ico-circle-thinline

text on ico-calendar-open

ico-plus on ico-circle


text on ico-char


text on ico-circle-o


text on ico-london-tube

ico-pencil on ico-square

ico-snapchat on ico-square

ico-yin-yang on ico-frame

ico-noentry on ico-camera

Stacked icons on ico-frame

Stacked icons - filetypes


Icons on metal-button bg:






Bootstrap Integration

Shadows and borders

<i class="ux ico-quotes1 ux-4x pull-left darkslategray"><i>
access icon, exchange icon, onenote icon, outlook icon, powerpoint icon, project icon, publisher icon, sharepoint icon, sway icon, word icon, excel icon, office icon, office365 icon, microsoft icon, visual-studio icon, docx icon, mp3 icon, wav icon, avi icon, mp4 icon, mov icon, png icon, psd icon, jpg icon, gif icon, ai icon, eps icon, pdf icon, sql icon, exe icon, css icon, js icon, php icon, html icon, asp icon, otf icon, zip icon, rar icon, svg icon, txt icon, battery-charging icon, stackoverflow icon, etsy icon, zurb icon, google analytics icon, foursquare icon, yelp icon, kik icon, color-cc icon, adobe-air icon, flashplayer icon, github icon, dribbble icon, pinterest icon, icq icon

<i class="ux ico-dice-six ux-4x radius12 pull-left shadow2 white bg-black"><i>
digg icon, pocket icon, vkontakte icon, email icon, align-left icon, align-center icon, align-right icon, align-justify icon, list icon, lock icon, keyboard icon, traffic-cone icon, bin icon, books icon, table icon, list-ol icon, list-ul icon, london-tube icon, map-marker icon, street-view icon, link icon, database icon, files icon, thumbs-up icon, stopwatch icon, spade icon, club icon,heart icon, diamond icon, key icon, yin-yang icon, radioactive icon, ce-mark icon, book icon, quotes icon, after-effects icon, illustrator icon, audition icon, bridge icon, dreamweaver icon, fireworks icon, indesign icon, lightroom icon, premiere icon, photoshop icon, eye icon, wifi icon, usb icon, usb-drive icon, bluetooth icon

<i class="ux ico-dice-two ux-4x radius12 pull-left shadow2 white bg-black"><i>
taurus icon, gemini icon, cancer icon, leo icon, virgo icon, libra icon, scorpio icon, sagittarius icon, capricorn icon, aquarius icon, pisces icon, celcius icon, fahrenheit icon, pie chart icon,char icon, biohazard icon, slack icon, producthunt icon, jsdelivr icon, feedly icon, weebly icon, wechat icon, line icon, angularjs icon, maxcdn icon, angellist icon, recycle icon, snapchat icon, icloud icon, vine icon, coderwall icon, surveillancecam icon, mic icon, headphones icon, coffee icon, onedrive icon, creativecloud icon, sunny icon, partly-cloudy icon, cloudy icon, rainy icon, lightning icon, snowy icon, snowflake icon, send mail icon, go icon, notifications icon, select icon, app-launcher icon, science icon, library icon, suitcase icon, font awesome icon,registered icon, home icon,attachment icon

<i class="ux ico-dice-five ux-4x radius12 pull-left black bg-white white-stroke2"><i>
cut icon, copy icon, paste icon, save icon, printer icon, visa icon, mastercard icon, paypal icon,creditcard icon, google wallet icon, start-chat icon, envelope icon, import icon, phone icon, radio icon, shoppingbag icon, shopping basket icon, question icon, info sign icon, caret icon, signal icon, fullscreen icon, expand icon, shrink icon, arrow-sign icon, chevron icon, arrow icon, angle icon, favorites icon, bookmark icon, terminal icon, remove icon, paintbrush icon, pencil icon, flipboard icon, eyedropper icon, edit icon, bucket icon, cc icon, by icon, css3 icon, html5 icon, wheelchair icon, water icon, train icon, swim icon, locker icon, alpine icon, guard icon, elevator icon, litter icon

Social icons and arrows (rotate)

Rounded social icons:



Using css rotate classes as shown here:

<i class="ux ux-3x ico-arrow"></i>
<i class="ux ux-3x ico-arrow ux-rotate-180"></i>
<i class="ux ux-3x ico-arrow ux-rotate-90"></i>
<i class="ux ux-3x ico-arrow ux-rotate-270"></i>

(no class;.ux-rotate-45;.ux-rotate-90;.ux-rotate-135;.ux-rotate-180;

Media player icons:

Use flip-horizontal class on 'forward', 'fast-forward' and 'step-forward':

<i class="ux ux-3x ico-fast-forward ux-flip-horizontal"></i>

Different ways of css styling (mouse over):