How to use

Just append/prepend a <i class="lui {palette} icon {icon-name}"></i> element.

<i class="lui red icon warning"></i>: , <i class="lui primary icon jumpping cc"></i>:

Important: the words order is important in the icon-name : lui icon arrow south is not the same that lui icon south arrow

Finally, you can use the available mixin .lui_icon_maker(forbidden)

List of all available icons

Arrows

Context sensitive icons

Icons that tend to appear a lot in the web page and convey a message that depends highly on the context. They serve to reinforce a message given by the context.

For example this


does not convey the same information as this In both cases put emphasis on the information next to it but the information reinforced is not the same

Context insensitive icons

Generic icons that convey a fixed message and using them adds information to the element or put emphasis on existing information.

For example this looks like a link to some page while this is clearly a link to some attachment

Also this button conveys a clearer information than this button

Mouse interactions

Here are the icons that either tell the user there is a mouse interaction possible or that appear when the user interacts using his/her mouse.

This tells the user he can drag n drop the element. By doing so, his mouse cursor is changed to to confirm he is moving something.

Specific icons

Icons that represent one thing and one thing only