Open In App

Semantic-UI Icon Set Shapes

Last Updated : 27 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a CSS framework built with less and jQuery. It comes with pre-built elements and modules and great support for themes which makes it easier for developers to develop great websites. In this article, we will be learning about the Semantic UI Icon Set Shapes which are used to represent a variety of shapes. There are a total of 22 icons in the Shapes Icon Set.

Semantic-UI Icon Set Shapes Classes:

  • bookmark: This class is used to show the bookmark icon.
  • bookmark outline: These classes are used to show the outlined bookmark icon.
  • calendar: This class is used to show the calendar icon.
  • calendar outline: These classes are used to show the outlined calendar icon.
  • certificate: This class is used to show the certificate icon.
  • circle: This class is used to show the circle shape as an icon.
  • circle outline: These classes are used to show the outlined circle shape as an icon.
  • cloud: This class is used to show the cloud icon.
  • comment: This class is used to show the comment icon.
  • comment outline: These classes are used to show the outlined comment icon.
  • file: This class is used to show the file icon.
  • file outline: These classes are used to show the outlined file icon.
  • folder: This class is used to show the folder icon.
  • folder outline: These classes are used to show the outlined folder icon.
  • heart: This class is used to show the heart icon.
  • heart outline: These classes are used to show the outlined heart icon.
  • map marker: These classes are used to show the map marker icon.
  • play: This class is used to show the play icon.
  • square: This class is used to show the square icon.
  • square outline: These classes are used to show the outlined square icon.
  • star: This class is used to show the star icon.
  • star outline: These classes are used to show the outlined star icon.

Syntax:

<i class="icon bookmark"></i>

Example 1: The example below illustrates the use of all 22 icons listed above.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Shapes</title>
    <!-- Scripts and CSS -->
    <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;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h4>Semantic UI - Icon Set Shapes</h4>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon big bookmark"></i>
            </div>
            <div class="four wide column">
                <i class="icon big bookmark outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big calendar"></i>
            </div>
            <div class="four wide column">
                <i class="icon big calendar outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big certificate"></i>
            </div>
            <div class="four wide column">
                <i class="icon big circle"></i>
            </div>
            <div class="four wide column">
                <i class="icon big circle outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big cloud"></i>
            </div>
            <div class="four wide column">
                <i class="icon big comment"></i>
            </div>
            <div class="four wide column">
                <i class="icon big comment outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big file"></i>
            </div>
            <div class="four wide column">
                <i class="icon big file outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big folder"></i>
            </div>
            <div class="four wide column">
                <i class="icon big folder outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big heart"></i>
            </div>
            <div class="four wide column">
                <i class="icon big heart outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big map marker"></i>
            </div>
            <div class="four wide column">
                <i class="icon big play"></i>
            </div>
            <div class="four wide column">
                <i class="icon big square"></i>
            </div>
            <div class="four wide column">
                <i class="icon big square outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big star"></i>
            </div>
            <div class="four wide column">
                <i class="icon big star outline"></i>
            </div>
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


Semantic-UI Icon Set Shapes
Semantic UI – Icon Set Shapes


Example 2: The example below shows the use of Shapes Set icons with different colors.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Semantic-UI Icon Set Shapes</title> 


    <!-- Scripts and CSS -->


    <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; 


        } 


  


        h4 { 


            margin-top: 0px; 


        } 


  


        .ui.grid { 


            margin-top: 30px !important; 


        } 


    </style> 


</head> 


  


<body> 


    <div class="ui container"> 


        <div> 


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


            <h4>Semantic UI - Icon Set Shapes 


                with Colors Variation</h4> 


        </div> 


        <div class="ui grid"> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


                <i class="icon yellow big calendar"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon olive big calendar outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon green big certificate"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon teal big circle"></i> 


            </div> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


                <i class="icon purple big comment"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon pink big comment outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon brown big file"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon grey big file outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon black big folder"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon red big folder outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon yellow big heart"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon teal big heart outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon orange big map marker"></i> 


            </div> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


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


            </div> 


            <div class="four wide column"> 


                <i class="icon blue big square outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon green big star"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon olive big star outline"></i> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Icon Set Shapes
Semantic UI – Icon Set Shapes with Colors Variation


Example 3: The example below shows the use of Shapes set icons with size variation.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Semantic-UI Icon Set Shapes</title> 


    <!-- Scripts and CSS -->


    <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; 


        } 


  


        h4 { 


            margin-top: 0px; 


        } 


  


        .ui.grid { 


            margin-top: 30px !important; 


        } 


    </style> 


</head> 


  


<body> 


    <div class="ui container"> 


        <div> 


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


            <h4>Semantic UI - Icon Set Shapes 


                with Sizes Variation</h4> 


        </div> 


        <div class="ui grid"> 


            <div class="four wide column"> 


                <i class="icon tiny bookmark"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon tiny bookmark outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon small calendar"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon small calendar outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon small certificate"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon small circle"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon circle outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon cloud"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon comment"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon comment outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon large file"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon large file outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon large folder"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon large folder outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon big heart"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon big heart outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon big map marker"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon big play"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon huge square"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon huge square outline"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon huge star"></i> 


            </div> 


            <div class="four wide column"> 


                <i class="icon huge star outline"></i> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Icon Set Shapes
Semantic UI – Icon Set Shapes with Sizes Variation


Reference: https://semantic-ui.com/elements/icon.html#shapes


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Icon Set Status
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                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
            

        
    
        
            

                Semantic-UI Icon Set Medical
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        prashantrathore1159                                

                            

                            

            
                                

                            

                                                                    

                                        
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