Semantic-UI Icon Circular Variation Last Updated : 13 Feb, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <center> <body> <div style="margin-top:50px" class="ui container"> <h1 style="color:green">GeeksforGeeks</h1> <p><strong>Semantic UI icon circular variation</strong></p> <i class="circular backward icon"></i> <i class="circular step backward icon"></i> <i class="circular play icon"></i> <i class="circular step forward icon"></i> <i class="circular forward icon"></i> </div> </body> </center> </html> Output: Example 2: The following code demonstrates the circular icon classes along with file, folder, code, and bug icon from the icon set classes. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <center> <body> <div style="margin-top:50px" class="ui container"> <h1 class="ui header green">GeeksforGeeks</h1> <p><strong>Semantic UI icon circular variation</strong></p> <i class="circular file icon"></i> <i class="circular folder icon"></i> <i class="circular code icon"></i> <i class="circular bug icon"></i> </div> </body> </center> </html> Output: Reference: https://semantic-ui.com/elements/icon.html#/icon Comment More infoAdvertise with us Next Article Semantic-UI Icon Bordered Variation L lokeshpotta20 Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Elements Similar Reads Semantic-UI Image Circular Variations 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 boots 2 min read Semantic-UI Segment Circular Variation 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. Semantic UI provides us with a very easy way to style the web app instead of using CS 2 min read Semantic-UI Icon Colored Variation 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 boots 2 min read Semantic-UI Label Circular Variations Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. A Semantic UI label is used to create meaningful con 2 min read Semantic-UI Icon Bordered Variation 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 boots 2 min read Semantic-UI Icon Link Variation Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Icon is a glyph that is used t 2 min read Like