Semantic-UI Icon Set Objects

Last Updated : 22 Mar, 2022

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. The icons add more beauty to the website than the textual representation. In this article, let us see about the icon set of Objects. Semantic UI provides some most commonly used icon classes for objects.

Semantic UI Icon set Objects classes:

*icon object_class: This class is used to include different object icons in interfaces.

Syntax:

<i class="icon....object_class "></i>

Note: To know all the icon classes you can check this page: https://semantic-ui.com/elements/icon.html#objects

Example 1: This code demonstrates all object 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" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> 
        </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Icon Set Objects 
        </strong> 
        <br /> 
        <br /> 
  
        <div class="container"> 
  
            <div class="ui grid"> 
                <div class="three wide column"> 
                    <i class="icon big ambulance"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big anchor"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big archive"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big balance scale"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big bath"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big beer"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big bell"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big bell outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big bicycle "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big binoculars"></i> 
                </div> 
        </div> 
    </center> 
</body> 
  
</html> 

Output :

Semantic-UI Icon Set Objects

Example 2: This code demonstrates an example of objects 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" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity= 
    "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> 
        </script> 
    <script src= 
    "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong> 
            Semantic-UI Icon Set Objects 
        </strong> 
        <br /> 
        <br /> 
  
        <div class="container"> 
  
            <div class="ui labeled icon menu"> 
                <a class="item"> 
                  <i class="home icon"></i> 
                  Home 
                </a> 
                <a class="item"> 
                  <i class="chat icon"></i> 
                  Messages 
                </a> 
                <a class="item"> 
                  <i class="bullhorn icon"></i> 
                  Notifications 
                </a> 
                <a class="item"> 
                    <i class="bug icon"></i> 
                    Report bug 
                  </a> 
                  <a class="right item"> 
                    <i class="bookmark icon"></i> 
                    Bookmarks 
                  </a> 
              </div> 
        </div> 
    </center> 
</body> 
  
</html> 