Open In App

Semantic-UI Icon Set Vehicles

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

Semantic UI is a CSS framework similar to Bootstrap. It ships with pre-built semantic components which helps in developing responsive and beautiful web experiences. In this article, we will be seeing the Vehicles Icon set that comes with Semantic UI. 
The Vehicles Icon set is a set of 18 icons used for representing vehicles and transport.

Semantic-UI Icon Set Vehicles Classes:

  • ambulance: This class is used to show the ambulance icon.
  • bicycle: This class is used to show the bicycle icon.
  • bus: This class is used to show the bus icon.
  • car: This class is used to show the car icon.
  • fighter with jet: These classes are used to show the fighter jet icon.
  • motorcycle: This class is used to show the motorcycle icon.
  • paper with plane: These classes are used to show the paper plane icon.
  • paper with plane and outline: These classes are used to show the outlined paper plane icon.
  • plane: This class is used to show the simple plane icon.
  • rocket: This class is used to show the rocket icon.
  • ship: This class is used to show the ship icon.
  • shopping with cart: These classes are used to show the shopping cart icon.
  • space with shuttle: These classes are used to show the space shuttle icon.
  • subway: This class is used to show the subway icon.
  • taxi: This class is used to show the taxi icon.
  • train: This class is used to show the train icon.
  • truck: This class is used to show the truck icon.
  • wheelchair: This class is used to show the wheelchair icon.

Syntax:

<i class="icon Vehicle-Icon-Class/Classes"></i>

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

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic UI - Icon Set Vehicles</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 Vehicles</h3>
    </div>
 
    <div class="ui grid">
      <div class="two wide column">
         <i class="icon big ambulance"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big bicycle"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big bus"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big car"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big fighter jet"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big motorcycle"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big paper plane"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big paper plane outline"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big plane"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big rocket"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big ship"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big shopping cart"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big space shuttle"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big subway"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big taxi"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big train"></i>
      </div>
 
      <div class="two wide column">
         <i class="icon big truck"></i>
      </div>
 
      <div class="two wide column">
          <i class="icon big wheelchair"></i>
      </div>
    </div>
  </div>
</body>
 
</html>
 






                        










Output:


Semantic UI – Icon Set Vehicles


Example2: The example below shows the variations of vehicles icons with different colors and sizes.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


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


    </div>


 


    <div class="ui grid">


      <div class="two wide column">


         <i class="icon red small ambulance"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon orange small bicycle"></i>


      </div>


 


      <div class="two wide column">


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


      </div>


 


      <div class="two wide column">


         <i class="icon olive small car"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon green fighter jet"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon teal motorcycle"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon blue paper plane"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon brown large paper plane outline"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon black large plane"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon grey large rocket"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon purple large ship"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon violet big shopping cart"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon red big space shuttle"></i>


      </div>


 


      <div class="two wide column">


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


      </div>


 


      <div class="two wide column">


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


      </div>


 


      <div class="two wide column">


         <i class="icon teal huge train"></i>


      </div>


 


      <div class="two wide column">


         <i class="icon pink huge truck"></i>


      </div>


 


      <div class="two wide column">


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


      </div>


    </div>


  </div>


</body>


 


</html>



















                        







                        










Output:


Semantic UI – Icon Set Vehicles with different sizes and colors


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Icon Set
                                    

                                

                                                        

                            
    

        

            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
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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