Semantic-UI Corner Icon Group Last Updated : 24 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. In this article, we will learn about the corner icon group in Semantic UI. The corner icon group is a combination of two or more icons that are layered on top of each other to create a desired icon. To make a corner icon group in Semantic UI, we create a large icon using huge and other icons classes and then add a normal size icon at a corner position using position classes. Semantic UI corner icon group class: corner: This class positions the smaller icon to the corner of the bigger icon. Syntax: <i class="huge icons"> <i class="<icon-name> ... icon"></i> <i class="top corner <icon-name> icon"></i> </i> Example 1: This example demonstrates the basic corner icon groups in Semantic UI. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:20px;"> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Icon group</strong> <br> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue corner add icon"></i> </i> <i class="huge icons"> <i class="green user icon"></i> <i class="blue corner close icon"></i> </i> <i class="huge icons"> <i class="yellow share icon"></i> <i class="blue corner help icon"></i> </i> </center> </body> </html> Output: Output Example 2: This example demonstrates all positions corner icon groups in Semantic UI. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:x20px;"> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI Icon group</strong> <br> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue top left corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue top right corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue bottom left corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue bottom right corner add icon"></i> </i> </center> </body> </html> Output: Output Reference: https://semantic-ui.com/elements/icon.html#/definition#groups Comment More infoAdvertise with us Next Article Semantic-UI Dropdown Icon Content M mishrapriyank17 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Icon Buttons Group 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 Button offers several types of micro button components like Types, Groups 2 min read Semantic-UI Dropdown Icon Content 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 dropdown allows a user to select a value from a series of options. Semant 2 min read Semantic-UI Icon Header Content 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 header provides a short summary of content and it’s can contain 3 content 2 min read Semantic-UI Button Groups Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Semantic UI Button Group offers categorized button group which allow to group 2 min read Semantic-UI Icon Set Code 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 4 min read Semantic-UI List Icon Content 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 list offers us to order any list. There are 4 types of listing available 2 min read Like