Mobirise Icons

A free, open source set of 150 elegant, pixel-perfect vector icons from Free Website Builder. Try it, maybe it's something you need for your next awesome project! Available as web icon font and SVG icons, in 16px, 24px, and 30px grid, 7 categories.

Some features

 Free and open source

You can use this icon font with any your projects, and you don't have to pay for it! It's totally free and licensed under CC BY 4.0.

Lightweight

Using svg or font icons instead of images can make your site lighter, because you need to load only your font, you don't have to use heavy images now! Load font once and use several icons.

TRENDY LOOK

Icons can make your site look better! Clear and beautifully drawn, these line icons will make your clients happy! Or, at least, will improve your product's UX.

 150 ICONS

150 unique, pixel-perfect icons in 24px and 30px base in a single font! You can download the font, or separate SVG files as well.

Install them easily

The procedure of adding is easy as ABC! Use special CSS classes, Unicode entities, or import SVG files.

Style and Animate

You can edit the way your icons look using CSS rules, and also animate them.

Three grids: 16px, 24px for Android, 30px for iOS

16px
1x
2x
3x
4x
24px
1x
2x
3x
4x
30px
1x
2x
3x
4x

Adding an icon font to a page

If you want to place an icon on your button or replace your image with it in the Mobirise app, there is no special action needed. Mobirise contains a special extension to work with icons. Since this font is provided by Mobirise, it is available by default.

If you want to add some icons to your page made with other tools, install a font to your page first.
1) Download the font files, and put the mobirise folder to the same folder with your page. If you change the location of this folder, don't forget to correct the path to style.css file noted in code.

2) Add a special style.css file to your page:

<link rel="stylesheet" href="mobirise/style.css">

Please make sure that also your font files available in the mobirise/fonts folder (mobirise.eot, mobirise.svg, mobirise.ttf, mobirise.woff).

3) Then you can use special classes to add icons to your page:

<span class="mbri-hearth"></span>

Also, there are special codes for icons, view the cheatsheet to learn more.

Some ideas you can style your iconfont with

Combine multiple icons

You have a set of 150 line icons, but want more? Maybe you should try to unite them to have unusual combinations. It seems to be easier for you to work with them as pictures in some image editor, but using CSS to position your icons is also a way.
Make a container for your icons and position them inside. We used the relative position for the laptop icon in this example, and the absolute position for the heart icon.

.mbri-laptop { font-size:94px;
position: relative;
}
.mbri-hearth {font-size: 40px;
font-weight: bold;
position: absolute;
left: 27px;
top: 23px;
}

Change your icon style on hover

It's pretty easy, but some of you still can find it helpful. You can change the color of your icon on hover, its background, make it bigger or smaller, just use the simple CSS rule.

:hover is a pseudo-class that applies while a user keeps a pointer over an element. You can also find more info about the :active and :focus pseudo-classes.

We use the hover pseudo-class to highlight a hyperlink. If you want to make your icon hyperlinked, it will look more natural if it changes its appearance on hover.

We'll change the color of our icon on hover to make it saturated. We use the download icon, it has this class: mbri-download.

.mbri-download { font-size:90px;color:#B3E5FC;height:100px;}

.mbri-download:hover { color: #4FC3F7; }
Hover over the icon to see the effect:

Most modern browsers except for IE9 support CSS transitions and animations. If you're using IE9 or earlier versions of IE, please note that you won't see some examples we want to show here.

Transitions

You can make your effect smoother using the transition properties or transition shorthand property to set the values of transition-property, transition-duration, transition-timing-function, and transition-delay. This helps to set an effect of transition.

It the example we set the duration value for our effect. Our effect here is text-shadow, and we use three shadows at the same time.

The icon in this example has this class: mbri-sun, but you can add another class as well.

Since our example icon is the sun, we'll make it yellow and glow on hover.

.mbri-sun {
font-size:90px;
color:#CFD8DC;}

.mbri-sun:hover {
color: #FDD835;
text-shadow: 0px 0px 5px #FDD835,
0px 0px 10px #FDD835,
0px 0px 15px #FDD835;
transition-duration: 1s;}
Hover over the icon to see the effect:

Keyframes

The @keyframe rule specifies the animation code. Set your frames and thus you will create an animation that changes from one set of CSS Style to another.

In our example, we'll add a pulsing animation to make our heart icon beating. We have added the pulse class to our icon.

.mbri-hearth {font-size:90px; color:#CFD8DC;}

.mbri-hearth:hover { color: #EC407A; }

@keyframes pulse_animation {
0% { transform: scale(1); }
40% { transform: scale(1.10); }
50% { transform: scale(1); }
60% { transform: scale(1.10); }
70% { transform: scale(1); }
}

.pulse:hover {
animation-name: pulse_animation;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Hover over the icon to see the effect:

Applying CSS rules to multiple icons at the same time

You can add the same class to several icons and make some rules with your selector.

We'll add a round background to our icon set in this example. Both icons have .mbr-iconfont class.

.mbr-iconfont{
border-radius: 50%; margin:20px; padding:20px;
background-color:transparent;
border: 3px dotted transparent;
margin-top:10px; margin-top:10px;
}

.mbr-iconfont:hover {
color:#00838F;
background-color:#B2EBF2;
font-weight:900;
transition: background-color 1s;
border: 3px dotted rgba(0, 131, 143, 0.5);}
Hover over the icons to see the effect:

Using SVG icons

Using icon fonts give some benefits, but also there are some limitations in modifying. CSS effects we can use for them are the same we use for text. Using SVG files can provide more possibilities, so we also provide .svg files. 

Adding .svg file to pages

You can simply use .svg files as images files.

<img src="mbri-star.svg" alt="mbri-star">

Adding SVG as an object

It's considered as the best way to add SVG files to pages if you intend to modify your icons using CSS and scripts without placing them to HTML directly.

<object type="image/svg+xml" data="star.svg">SVGs aren't supported. </object>

Using "inline" SVG

You can use the code of your SVG files. Download some SVG icon and open it using some text editor to learn its code. You can simply paste it into your HTML code.

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M 12,0 C 11.80898,-0.00131698 11.637806,0.10630841 11.552734,0.27734375 L 8.15625,7.0703125 0.37890625,9.015625 C 0.02138515,9.104785 -0.12019317,9.5368611 0.11523438,9.8203125 L 4.9765625,15.654297 4.0039062,23.4375 c -0.050317,0.401757 0.3727673,0.693617 0.7304688,0.503906 L 12,20.066406 l 7.265625,3.875 c 0.357702,0.189711 0.780786,-0.102149 0.730469,-0.503906 L 19.023438,15.654297 23.884766,9.8203125 C 24.120194,9.536861 23.978615,9.1047849 23.621094,9.015625 L 15.84375,7.0703125 12.447266,0.27734375 C 12.36345,0.10882575 12.188204,0.00164408 12,0 Z m 0,1.6171875 3.052734,6.1054687 c 0.06527,0.1306969 0.184437,0.2263133 0.326172,0.2617188 l 7.226563,1.8066406 -4.490235,5.3886724 c -0.08857,0.106654 -0.128889,0.245293 -0.111328,0.382812 l 0.88086,7.042969 -6.650391,-3.546875 c -0.146573,-0.07777 -0.322177,-0.07777 -0.46875,0 L 5.1152344,22.605469 5.9960938,15.5625 C 6.0136552,15.424981 5.9733368,15.286342 5.8847656,15.179688 L 1.3945312,9.7910156 8.6210938,7.984375 C 8.7628285,7.9489695 8.8819922,7.853353 8.9472656,7.7226562 Z"/> </svg>

VIEW THE FULL LIST OF 150 ICONS