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.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI - Icon Set Medical</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ 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.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI - Icon Set Medical</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ 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