Semantic-UI Icon Set Design

Last Updated : 28 Feb, 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 design. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors and here are the classes.

Semantic UI Icon set design classes:

adjust: This class is used to show the adjust icon.
clone: This class is used to show the clone icon
clone outline: This class is used to show the outline of the clone icon.
copy .: This class is used to show the copy icon.
copy outline: This class is used to show the outline of the copy icon.
crop: This class is used to show the crop icon.
crosshairs: This class is used to show the crosshairs icon.
cut: This class is used to show the cut icon.
edit: This class is used to show the edit icon.
edit outline: This class is used to show the outline of the edit icon.
eraser: This class is used to show the eraser icon.
eye: This class is used to show the eye icon.
eye dropper: This class is used to show the eyedropper icon.
eye slash: This class is used to show the eye slash icon.
eye slash outline: This class is used to show the outline of the eye slash icon.
object group: This class is used to show the object group icon.
object group outline: This class is used to show the outline of the object group icon.
object ungroup: This class is used to show the object ungroup icon.
object ungroup outline: This class is used to show the outline of the object ungroup icon.
paintbrush: This class is used to show the paintbrush icon.
paste: This class is used to show the paste icon.
pencil alternate: This class is used to show the pencil alternate icon.
save: This class is used to show the save icon.
save outline: This class is used to show the outline of the save icon.
tint: This class is used to show the tint icon.

Syntax:

<i class="icon.... design-icon-class "></i>

Example 1: This code demonstrates all design 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 Design 
        </strong> 
        <br /> 
        <br /> 
  
        <div class=" ui container"> 
  
            <div class="ui grid"> 
                <div class="three wide column"> 
                    <i class="icon big adjust"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big clone"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big clone outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big copy"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big copy outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big crop"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big crosshairs"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big cut"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big edit "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big edit outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big eraser"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big eye "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big eye dropper"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big eye slash"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big eye slash outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big object group "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big object group outline"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big object ungroup"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big object ungroup outline "></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big paint brush"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big paste"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big pencil alternate"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big save"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big save outline"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big tint"></i> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output :

Example 2: This code demonstrates the use of design 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 Design</strong> 
        <br /> 
        <br /> 
        <div class="ui container"> 
            <button class="ui button"> 
                <i class="cut icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="copy icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="paste icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="save icon"></i> 
            </button> 
        </div> 
    </center> 
</body> 
  
</html>