Semantic-UI Icon Set Computers

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, we will see about the Icon set of computer. Semantic UI Icon Set Computers provides some most commonly used icon classes for computers and here are the classes.

Semantic UI Icon set computer classes:

desktop: This class is used to show the desktop icon.
download: This class is used to show the download icon.
hdd: This class is used to show the HDD icon.
hdd outline: This class is used to show the outline of the icon.
headphones: This class is used to show the headphones icon.
keyboard: This class is used to show the keyboard icon.
keyboard outline: This class is used to show the outline of the keyboard icon.
laptop: This class is used to show the laptop icon.
microchip: This class is used to show the microchip icon.
mobile: This class is used to show the mobile icon.
mobile alternate: This class is used to show the mobile alternate icon.
plug: This class is used to show the plug icon.
power off: This class is used to show the power off icon.
print: This class is used to show the print 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.
server: This class is used to show the server icon.
tablet: This class is used to show the tablet icon.
tablet alternate: This class is used to show the alternate tablet icon.
tv: This class is used to show the tv icon.
upload: This class is used to show the upload icon.

Syntax:

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

Example 1: This code demonstrates all computer 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 Computers 
        </strong> 
        <br /> 
        <br /> 
        <div class=" ui container"> 
  
            <div class="ui grid"> 
                <div class="three wide column"> 
                    <i class="icon big desktop"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big download"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big hdd"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big hdd outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big headphones"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big keyboard "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big keyboard outline"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big laptop"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big microchip "></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big mobile"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big mobile alternate"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big plug"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big print"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="icon big power off"></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 server"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big tablet"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big tablet alternate"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big tv"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big upload"></i> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Example 2: This code demonstrates the colored icons

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 Computers 
        </strong> 
        <br /> 
        <br /> 
        <div class=" ui container"> 
            <i class="upload grey large icon"></i> 
            <i class="download blue large icon"></i> 
            <i class="save outline green large icon"></i> 
            <i class="print red large icon"></i> 
        </div> 
    </center> 
</body> 
  
</html>