There is a newer version of Luda.

Let's go!


Icons have become inseparable part of visual interfaces for their power to create effective visual communication. In Luda, you can use CSS icons, font icons, svg icons and more.

Include External Icon Libraries

If you want to include an external icon library, make sure the librarys’ CSS are included before Luda’s CSS. Don’t forget to add the .ico class together with the library’s icon classes, so the icon styles can be consistent.

Built-in CSS Icons

Luda includes some most widely used icons by default, they’re written in pure CSS and super easy to use, just add the .ico.ico-* classes to an inline element.

All built-in CSS icons are listed in the below gallery.









<i class="ico ico-left"></i>
<i class="ico ico-right"></i>
<i class="ico ico-up"></i>
<i class="ico ico-down"></i>
<i class="ico ico-plus"></i>
<i class="ico ico-cross"></i>
<i class="ico ico-menu"></i>
<i class="ico ico-search"></i>

Font Icons

If you want to use icon fonts, you need include them by yourself, Luda doesn’t provide any built-in icon fonts. There’s no big difference between using external font icons and using built-in CSS icons. Let’s see the below example for clarification.


<!-- Add the .ico class and the material icon class .material-icons together. -->
<i class="ico material-icons">backspace</i>

Svg Icons and Icon Sprites

For svg icons and icon sprites, add the .ico class to control styles. Don’t forget to add extra classes required by external icon libraries which may be included in your projects.

svg icon

<svg class="ico" viewBox="...">...</svg>

Sass Variables

$icon-size-em: 1.15em !default
$icon-stroke-width: 2px !default

Default line width of the built-in CSS icons.