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=
<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 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=
<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 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