Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing and responsive. An icon is a glyph used to represent something else. Semantic UI provides thousands of icons through a complete port of Font Awesome 5.0.8 designed by the Font Awesome team for its standard icon set. These icons serve a very similar function to text on a page and can be formatted like text. These icons are inline elements so they do not affect the formatting of text. To use icon set in Semantic UI, we use the special tag <i> which allows for an abbreviated markup when sitting alongside text. The <i> tag uses the class icon along with the name of the icon. The class name used with the <i> tag determines the shape of the icon. For example, wheelchair, sign language, question circle, etc. To color the icons, we can add the desired color as a class name and the icon will have that color as foreground color.

Syntax:

<i class="<icon-name> icon"></i>

Example 1: The following example demonstrates the different icons provided by semantic UI.

Output:

Output

Example 2: The following example demonstrates the icons in different colors provided by semantic UI.

Output:

Output

Reference: https://semantic-ui.com/elements/icon.html#/icon