Open In App

Semantic-UI Icon Set Users & People

Last Updated : 10 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a component-rich UI framework used for designing and theming websites. In this article, we will be seeing the Users and People icons that come with Semantic UI. There are a total of 31 icons in the Users and People icon set.

Semantic-UI Icon Set Users & People Classes:

  • address with book: These classes are used together to show the address book icon.
  • address with book and outline: These classes are used together to show the outlined address book icon.
  • address with card: These classes are used together to show the address card icon.
  • address with card and outline: These classes are used together to show the outlined address card icon.
  • bed: This class is used to show the bed icon.
  • blind: This class is used to show an icon showing a blind person walking.
  • child: This class is used to show a child icon.
  • female: This class is used to show the icon representing the female gender.
  • frown: This class is used to show an icon showing a frown face.
  • frown with outline: These classes are used to show an icon showing an outlined frown face.
  • id with badge: These classes are used together to show the id badge icon.
  • id with badge and outline: These classes are used together to show the outlined id badge icon.
  • id with card: These classes are used together to show the id card icon.
  • id with card and outline: These classes are used together to show the outlined id card icon.
  • male: This class is used to show the icon representing the male gender.
  • meh: This class is used to show a face having a meh expression.
  • meh with outline: These classes are used to show an outlined face having a meh expression.
  • power with off: These classes are used together to show the power off icon.
  • smile: This class is used to show a smiling face icon.
  • smile with outline: These classes are used together to show an outlined smiling face icon.
  • street with view: These classes are used together to show the street view icons.
  • user: This class is used to show a simple user icon.
  • user with outline: These classes are used together to show an outlined user icon.
  • user with circle: These classes are used together to show a circular user icon.
  • user with circle and outline: These classes are used together to show an outlined circular user icon.
  • user with md: These classes are used to show a medical-related user icon.
  • user with plus: These classes are used together to show a user with a plus icon.
  • user with secret: These classes are used together to show a secret user icon.
  • user with times: These classes are used together to show a user with a times icon.
  • users: This class is used to show an icon representing a group of users.
  • wheelchair: This class is used to show an icon representing a person in a wheelchair.

Syntax:

<i class="icon Users-&-People-Icon-Class/Classes"></i>

Example: The below example shows the use of all 31 icons listed above.

HTML




<!DOCTYPE html>
<html>
 
<head>
   <title>Semantic UI - Icon Set Users & People</title>
   <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
 
   <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
 
   <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
   </script>
 
   <style>
   .ui.container {
      text-align: center;
   }
 
   h3 {
      margin-top: 0px;
   }
 
   .ui.grid {
      margin-top: 30px !important;
   }
   </style>
</head>
 
<body>
  <div class="ui container">
    <div>
      <h1 style="color: green;">GeeksforGeeks</h1>
      <h3>Semantic UI - Icon Set Users & People</h3>
    </div>
 
    <div class="ui grid">
        <div class="three wide column">
           <i class="icon big address book"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big address book outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big address card"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big address card outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big bed"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big blind"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big child"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big female"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big frown"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big frown outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big id badge"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big id badge outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big id card"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big id card outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big male"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big meh"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big meh outlinne"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big power off"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big smile"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big smile outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big street view"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user circle"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user circle outline"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user md"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user plus"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user secret"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big user times"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big users"></i>
        </div>
 
        <div class="three wide column">
           <i class="icon big wheelchair"></i>
        </div>
    </div>
  </div>
</body>
 
</html>
 






                        










Output:


Semantic UI – Icon Set Users and People


Example2: The below example shows how to use users & people icons with different colors and sizes.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>Semantic UI - Icon Set Users & People</title>


    <link rel="stylesheet" href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>


 


    <script src=


"https://code.jquery.com/jquery-3.1.1.min.js">


    </script>


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </script>


 


    <style>


      .ui.container {


         text-align: center;


      }


 


      h3 {


         margin-top: 0px;


      }


 


      .ui.grid {


         margin-top: 30px !important;


      }


    </style>


</head>


 


<body>


  <div class="ui container">


    <div>


      <h1 style="color: green;">GeeksforGeeks</h1>


      <h3>Semantic UI - Icon Set Users & People</h3>


    </div>


 


    <div class="ui grid">


      <div class="three wide column">


         <i class="icon red small address book"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon blue small address book outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon green small address card"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon teal small address card outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon yellow small bed"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon blue blind"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon violet child"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon purple female"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon pink frown"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon brown frown outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon grey large id badge"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon black large id badge outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon yellow large id card"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon teal large id card outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon grey big male"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon pink big meh"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon blue big meh outlinne"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon purple big power off"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon red big smile"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon orange big smile outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon olive huge street view"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon green huge user"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon teal huge user outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon violet huge user circle"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon blue big user circle outline"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon pink big user md"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon grey big user plus"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon brown big user secret"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon pink big user times"></i>


      </div>


 


      <div class="three wide column">


         <i class="icon violet big users"></i>


      </div>


 


      <div class="three wide column">


          <i class="icon pink big wheelchair"></i>


      </div>


    </div>


  </div>


</body>


 


</html>



















                        







                        










Output:




Reference: https://semantic-ui.com/elements/icon.html#users–people


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Icon Set Payments & Shopping
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to Install Apache Maven on Windows?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Icon Set Hands & Gestures
            

        
    
        
            

                How to replace dropdown-toggle icon with another default icon in Bootstrap ?
            

        
    
        
            

                How to create Icon-only positioning icon using jQuery Mobile ?
            

        
    
        
            

                React Suite Icon <Icon> Props
            

        
    
        
            

                Semantic-UI Icon Set Sports
            

        
    
        
            

                Semantic-UI Icon Set Genders
            

        
    
        
            

                Semantic-UI Icon Set Chess
            

        
    
        
            

                Semantic-UI Icon Set Status
            

        
    
        
            

                Semantic-UI Icon Set Logistics
            

        
    
        
            

                Semantic-UI Icon Set Health
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        vpsop                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox