# Mobirise Icons

MobiriseIcons - 150 webdev icons in SVG and iconfont format. 16/24/30px grid versions, 6 categories. Open-source and free under Creative Commons license. Made by Mobirise.

Find the instruction on how to use the iconfont here.

View the cheatsheet to view all icons included in the font.

### Adding the icon font to a page

If you want to add some of the Mobirise icons to your page, install the font to your page first.

1) 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 font files are 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.

### Using SVG icons

Using iconfonts 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. Open an .svg file using some text editor to learn its 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>

You can simply paste it to your HTML code.