Open In App

Semantic-UI Icon Set Files

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

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 learn about the Icon Set Files. Semantic UI provides some of the most commonly used icon classes for files that are used in file manager applications.

Semantic UI Icon Set Files classes:

  • archive: This class is used to show the archive 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.
  • cut: This class is used to show the cut icon.
  • file: This class is used to show the file icon.
  • file outline: This class is used to show the outline of the file icon.
  • file alternate: This class is used to show the alternate file icon.
  • file alternate outline: This class is used to show the outline of the file alternate icon.
  • file archive: This class is used to show the file archive icon.
  • file archive outline: This class is used to show the outline file archive icon.
  • file audio: This class is used to show the file audio icon.
  • file audio outline: This class is used to show the outline of the file audio icon.
  • file code: This class is used to show the file code icon.
  • file code outline: This class is used to show the outline of the file code icon.
  • file excel: This class is used to show the file excel icon.
  • file excel outline: This class is used to show the outline of the file excel icon.
  • file image: This class is used to show the file image icon.
  • file image outline: This class is used to show the outline of the file image icon.
  • file pdf: This class is used to show the file pdf icon.
  • file pdf outline: This class is used to show the outline of the file pdf icon.
  • file powerpoint: This class is used to show the file powerpoint icon.
  • file powerpoint outline: This class is used to show the outline of the file powerpoint icon.
  • file video: This class is used to show the file video icon.
  • file video outline: This class is used to show the outline of the file video icon.
  • file word: This class is used to show the file word icon.
  • file word outline: This class is used to show the outline of the file word icon.
  • folder: This class is used to show the folder icon.
  • folder outline: This class is used to show the outline of the folder icon.
  • folder open: This class is used to show the open folder icon.
  • folder open outline: This class is used to show the outline of the open folder icon.
  • paste: This class is used to show the paste 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.
  • sticky note: This class is used to show the sticky note icon.
  • sticky note outline: This class is used to show the outline of the sticky note icon.

Syntax:

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

Example 1: This code demonstrates all file icon set classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Files</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>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Images
        </strong>
        <br />
        <br />
        <div class="ui container">
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big archive "></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 cut"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file alternate outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file archive"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file archive outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file audio"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file audio outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file code"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file code outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file excel"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file excel outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file image"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file image outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file pdf"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file pdf outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file powerpoint"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file powerpoint outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file video"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file video outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file word"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file word outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder open"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder open outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paste"></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 sticky note"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sticky note outline"></i>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>
 






                        










Output:


Semantic-UI Icon Set Files
Semantic-UI Icon Set Files


Example 2: This code demonstrates an example of files icon set classes.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Semantic-UI Icon Set Files</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> 


</head> 


  


<body> 


    <center> 


        <h1 class="ui green header">GeeksforGeeks</h1> 


        <strong> 


            Semantic-UI Icon Set Images 


        </strong> 


        <br /> 


        <br /> 


        <div class="ui container"> 


            <div class="ui basics icon buttons"> 


                <button class="ui button"> 


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


                </button> 


                <button class="ui button"> 


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


                </button> 


                <button class="ui button"> 


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


                </button> 


                <button class="ui button"> 


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


                </button> 


                <button class="ui button"> 


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


                </button> 


            </div> 


        </div> 


    </center> 


</body> 


  


</html>



















                        







                        










Output:


Semantic-UI Icon Set Files
Semantic-UI Icon Set Files


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Icon Set Chess
                                    

                                

                                                        

                            
    

        

            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
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
L

        

            
        

        

                                    


                                    

                                        lokeshpotta20                                

                            

                            

            
                                

                            

                                                                    

                                        
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