# Icon This component allow you to change icons style. ## Usage Vibrance Framework does not yet have its own icon fonts libraries. On the other hand, it is compatible with many icon fonts libraries such as [Font Awesome](http://fontawesome.io) or [Google Material Icons](https://material.io/icons/) for example. See the documentation in your Icon Font Library for instructions on how to use it. ----------- ## Margin You can add an small margin before or after the icon element. Add the ```.icon-left``` class to add an margin before, or the ```.icon-right``` class to add a margin after. The example below uses Font Awesome:
Example
Example
```html Example Example ``` ----------- ## Sizes You can easyly change the font size of an icon. Add first the ```.icon``` class on the icon element and add an ```.x*``` class. | Class | Description | | ------ | ------- | | ```.x12``` | Sets the font size to 12px. | | ```.x14``` | Sets the font size to 14px. | | ```.x16``` | Sets the font size to 16px. | | ```.x18``` | Sets the font size to 18px. | | ```.x24``` | Sets the font size to 24px. | | ```.x32``` | Sets the font size to 32px. | | ```.x48``` | Sets the font size to 48px. | | ```.x64``` | Sets the font size to 64px. | The example below uses Font Awesome:
x12 x14 x16 x18 x24 x32 x48 x64
```html ``` -----------