Copied to clipboard!
What kind of feedback do you have?
Now! All icon fonts are in separate page.
Download Font Icons

Frequently Asked Questions

What is Icon fonts?

Icon fonts has a one master CSS and font files, Basically it has contain lot of iconography which you can use easily by just putting very small code snippet and also you can styling with modern with CSS3, like font-size, color, shadow effects, transition etc.

What is advantages to use Icon fonts?

To use icon fonts, you just need to embed the icon webfont on you web app it is smaller in file size than a series of icons images, it is really flexible when you have big web project and need lots of icons with retina displays.

It has full CSS styling capability that is easy to change icon size with css properies, also you can use CSS3 advance properties, like transitions, drop shadows, gradient, animation etc. with cross browser compatibility. With icon fonts you can avoid to generate sprites and separate icon images and this will definitely save your time and efforts.

What is the license for UXWing icon fonts?

All web icon fonts are free to any commercial projects for yourself or a client. For more information on the rights of use, please see the license agreement

Can i use icon fonts in CSS without adding html code?

Yes, You can use with pseudo element by just copy and pasting css code which we provide in this page. Look at this Help Document it will help you lot.

How can i use font icons in my mockup and wireframe?

It is really easy, In download pack you will find TTF font file which you can install it on your computer, then just copy and paste character in to your mockup and wireframe. Look at this video it will help you lot.

Complete video guide.

YouTube Video Link
How to use font icons in HTML code
After downloading you will get all files which you need to including your web page.
(2) Include CSS File
You need to include uxwing-iconsfont.css in your head section in web page. Make sure you change the path to point to the file on your server. <link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />
(3) Change path in css
open "uxwing-iconsfont.css" Again, ensure that the path to the files matches the setup on your server.
@font-face {
font-family: 'uxwing-iconsfont';
src: url('../yourpath/uxwing-iconsfont.eot?v=1.0');
src: url('../yourpath/uxwing-iconsfont.eot?v=1.0#iefix') format('embedded-opentype'),
url('../yourpath/uxwing-iconsfont.ttf?v=1.0')
format('truetype'),

url('../yourpath/uxwing-iconsfont.woff?v=1.0') format('woff'),
url('../yourpath/uxwing-iconsfont.svg?v=1.0#uxwing-iconsfont') format('svg');
font-weight: normal;
font-style: normal;}
(4) HTML Integration
Check HTML Integration code below <i class="fi fi-newspaper"></i>
Done! Result


You can customize by apply css properties

How to use font icons in CSS code

(1) Include CSS File
The first step is to include uxwing-iconsfont.css in your the head of your HTML. Make sure you change the path to point to the file on your server. <link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />
(2) Change path in css
open "uxwing-iconsfont.css" Again, ensure that the path to the files matches the setup on your server.
@font-face {
AA font-family: 'uxwing-iconsfont';
src: url('../yourpath/uxwing-iconsfont.eot?v=1.0');
src: url('../yourpath/uxwing-iconsfont.eot?v=1.0#iefix') format('embedded-opentype'),
url('../yourpath/uxwing-iconsfont.ttf?v=1.0') format('truetype'),
url('../yourpath/uxwing-iconsfont.woff?v=1.0') format('woff'),
url('../yourpath/uxwing-iconsfont.svg?v=1.0#uxwing-iconsfont') format('svg');
font-weight: normal;
font-style: normal;}
(3) CSS Integration
.classname{position:relative;}
.classname:before{
content:"\e919";
font-family:"uxwing-iconsfont";
left:0px;
position:absolute;
top:0; }
Done!