Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. In this article let us see about the icon circular variation.

The icon circular variation allows the user to make the circular icons of the icon set of semantic UI.

Semantic UI icon circular variation classes:

• circular: This sets the icon in a circle.

Syntax:

<i class="circular ..."> 
    ...
</i>

Example 1: The following code demonstrates the circular icon classes along with step, backward, play and forward icons from the icon set classes.

Output:

Example 2: The following code demonstrates the circular icon classes along with file, folder, code, and bug icon from the icon set classes.

Output:           

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