Open In App

Semantic-UI Icon Set Medical

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

Semantic UI is a component-rich CSS framework that helps in developing responsive web interfaces. In this article, we will be seeing the Medical Icons that come with Semantic UI. There are a total of 17 icons in the medical icon set which can be used to represent common medical actions.

Semantic-UI Icon Set Medical Classes:

  • ambulance: This class is used to show the ambulance icon.
  • band with aid: These classes are used to show the bandage icon.
  • dna: This class is used to show the DNA icon.
  • first with aid: These classes are used to show the first aid kit icon.
  • heart: This class is used to show the heart icon.
  • heart with outline: These classes are used to show the outlined heart icon.
  • heartbeat: This class is used to show the heartbeat icon.
  • hospital: This class is used to show the hospital icon.
  • hospital with outline: These classes are used to show the outlined hospital icon.
  • hospital with symbol: These classes are used to show the H symbol icon.
  • pills: This class is used to show the pills icon.
  • plus: This class is used to show the plus icon.
  • stethoscope: This class is used to show the stethoscope icon.
  • syringe: This class is used to show the syringe icon.
  • thermometer: This class is used to show the thermometer icon.
  • user with md: These classes are used to show the user icon with a stethoscope.
  • weight: This class is used to show the weighing machine icon.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Semantic UI - Icon Set Medical</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 Medical</h3>
    </div>
  
    <div class="ui grid">
      <div class="three wide column">
          <i class="icon big ambulance"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big band aid"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big dna"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big first aid"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big heart"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big heart outline"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big heart beat"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big hospital"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big hospital outline"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big hospital symbol"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big pills"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big plus"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big stethoscope"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big syringe"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big thermometer"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big user md"></i>
      </div>
  
      <div class="three wide column">
          <i class="icon big weight"></i>
      </div>
    </div>
  </div>
</body>
  
</html>
 






                        










Output:




Example2: The example below shows the use of Icon set Medical icons with different sizes and colors.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


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


    </div> 


  


    <div class="ui grid"> 


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


          <i class="icon orange small band aid"></i> 


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


          <i class="icon olive large first aid"></i> 


      </div> 


  


      <div class="three wide column"> 


          <i class="icon green large heart"></i> 


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


          <i class="icon purple big hospital outline"></i> 


      </div> 


  


      <div class="three wide column"> 


          <i class="icon pink big hospital symbol"></i> 


      </div> 


  


      <div class="three wide column"> 


          <i class="icon brown huge pills"></i> 


      </div> 


  


      <div class="three wide column"> 


          <i class="icon grey huge plus"></i> 


      </div> 


  


      <div class="three wide column"> 


          <i class="icon black huge stethoscope"></i> 


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


          <i class="icon yellow huge thermometer"></i> 


      </div> 


  


      <div class="three wide column"> 


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


      </div> 


  


      <div class="three wide column"> 


          <i class="icon red huge weight"></i> 


      </div> 


    </div> 


  </div> 


</body> 


  


</html>



















                        







                        










Output:




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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Icon Set Maps
                                    

                                

                                                        

                            
    

        

            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 Users & People
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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