Semantic-UI Icon Set Status

Last Updated : 24 Feb, 2022

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. In this article, we are going to learn about Icon Set Status.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A Semantic UI Icon Set Status is used to represent the status symbol for different states. An icon set contains an arbitrary number of glyphs and Icons can represent different states.

Semantic-UI Icon Set Status Class:

Status-icon-class-name: This class is used to include the icon inside the label. Please refer the reference link to see the list of class names.

Syntax:

<a class="ui label">
 <i class="... icon"></i>
 ...
</a>

The below example illustrates the Semantic-UI Icon Set Status:

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
     rel="stylesheet" /> 
</head> 
  
<body> 
  <center> 
    <h1 class="ui header green">GeeksForGeeks</h1> 
    <h2>Semantic UI Icon  Set Status  </h2> 
  
    <i class="ban icon"> ban icon</i><br><br> 
    <i class="battery empty icon"> 
       battery empty icon 
    </i><br><br> 
  
    <i class="battery full icon">  
       battery full icon 
    </i><br><br> 
  
    <i class="bell outline icon">  
       bell outline icon 
    </i> 
  </center> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
      <h1 class="ui header green">GeeksforGeeks</h1> 
      <h2>Semantic UI Icon Set Status</h2> 
     
      <i class="calendar icon  green">  
         calendar icon 
      </i><br><br> 
  
      <i class="calendar check icon  green"> 
         calendar check icon 
      </i><br><br> 
  
      <i class="cart arrow down icon green"> 
         cart arrow down icon 
      </i><br><br> 
  
      <i class="exclamation icon green">  
         exclamation icon 
      </i> 
    </center> 
</body> 
  
</html>