Icon Blocks

View the full list of available material icons.


Icon sizing comes in 5 different sizes:




Extra Large

Extra Extra Large


Icons can be given any color value. To add a colour, you need to add a CSS class to the icon via the advanced > Additional CSS class(es) field.

By default, Tri theme does not include any colour classes for icons but you can add them with the following css example:

.fill-danger { fill: #f00; }

Then you would need to add “fill-danger” to the additional CSS class(es) box to apply it to that icon.


  • material (default)
  • custom

If you have your own set of SVG icons, you can put them in the Tri child themes assets/img/my-folder and use these icons. More details in the docs.

Read more in the Tri Documentation.