Semantic-UI Icon Set Medical
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;" >w3wiki</ 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;" >w3wiki</ 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