Semantic UI is a CSS framework built with less and jQuery. It comes with pre-built elements and modules and great support for themes which makes it easier for developers to develop great websites. In this article, we will be learning about the Semantic UI Icon Set Shapes which are used to represent a variety of shapes. There are a total of 22 icons in the Shapes Icon Set.
Semantic-UI Icon Set Shapes Classes:
- bookmark: This class is used to show the bookmark icon.
- bookmark outline: These classes are used to show the outlined bookmark icon.
- calendar: This class is used to show the calendar icon.
- calendar outline: These classes are used to show the outlined calendar icon.
- certificate: This class is used to show the certificate icon.
- circle: This class is used to show the circle shape as an icon.
- circle outline: These classes are used to show the outlined circle shape as an icon.
- cloud: This class is used to show the cloud icon.
- comment: This class is used to show the comment icon.
- comment outline: These classes are used to show the outlined comment icon.
- file: This class is used to show the file icon.
- file outline: These classes are used to show the outlined file icon.
- folder: This class is used to show the folder icon.
- folder outline: These classes are used to show the outlined folder icon.
- heart: This class is used to show the heart icon.
- heart outline: These classes are used to show the outlined heart icon.
- map marker: These classes are used to show the map marker icon.
- play: This class is used to show the play icon.
- square: This class is used to show the square icon.
- square outline: These classes are used to show the outlined square icon.
- star: This class is used to show the star icon.
- star outline: These classes are used to show the outlined star icon.
Syntax:
<i class="icon bookmark"></i>
Example 1: The example below illustrates the use of all 22 icons listed above.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon big bookmark"></i>
</div>
<div class="four wide column">
<i class="icon big bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon big calendar"></i>
</div>
<div class="four wide column">
<i class="icon big calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon big certificate"></i>
</div>
<div class="four wide column">
<i class="icon big circle"></i>
</div>
<div class="four wide column">
<i class="icon big circle outline"></i>
</div>
<div class="four wide column">
<i class="icon big cloud"></i>
</div>
<div class="four wide column">
<i class="icon big comment"></i>
</div>
<div class="four wide column">
<i class="icon big comment outline"></i>
</div>
<div class="four wide column">
<i class="icon big file"></i>
</div>
<div class="four wide column">
<i class="icon big file outline"></i>
</div>
<div class="four wide column">
<i class="icon big folder"></i>
</div>
<div class="four wide column">
<i class="icon big folder outline"></i>
</div>
<div class="four wide column">
<i class="icon big heart"></i>
</div>
<div class="four wide column">
<i class="icon big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon big map marker"></i>
</div>
<div class="four wide column">
<i class="icon big play"></i>
</div>
<div class="four wide column">
<i class="icon big square"></i>
</div>
<div class="four wide column">
<i class="icon big square outline"></i>
</div>
<div class="four wide column">
<i class="icon big star"></i>
</div>
<div class="four wide column">
<i class="icon big star outline"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Shapes
Example 2: The example below shows the use of Shapes Set icons with different colors.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes
with Colors Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon red big bookmark"></i>
</div>
<div class="four wide column">
<i class="icon orange big bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon yellow big calendar"></i>
</div>
<div class="four wide column">
<i class="icon olive big calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon green big certificate"></i>
</div>
<div class="four wide column">
<i class="icon teal big circle"></i>
</div>
<div class="four wide column">
<i class="icon blue big circle outline"></i>
</div>
<div class="four wide column">
<i class="icon violet big cloud"></i>
</div>
<div class="four wide column">
<i class="icon purple big comment"></i>
</div>
<div class="four wide column">
<i class="icon pink big comment outline"></i>
</div>
<div class="four wide column">
<i class="icon brown big file"></i>
</div>
<div class="four wide column">
<i class="icon grey big file outline"></i>
</div>
<div class="four wide column">
<i class="icon black big folder"></i>
</div>
<div class="four wide column">
<i class="icon red big folder outline"></i>
</div>
<div class="four wide column">
<i class="icon yellow big heart"></i>
</div>
<div class="four wide column">
<i class="icon teal big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon orange big map marker"></i>
</div>
<div class="four wide column">
<i class="icon pink big play"></i>
</div>
<div class="four wide column">
<i class="icon grey big square"></i>
</div>
<div class="four wide column">
<i class="icon blue big square outline"></i>
</div>
<div class="four wide column">
<i class="icon green big star"></i>
</div>
<div class="four wide column">
<i class="icon olive big star outline"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Shapes with Colors Variation
Example 3: The example below shows the use of Shapes set icons with size variation.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes
with Sizes Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon tiny bookmark"></i>
</div>
<div class="four wide column">
<i class="icon tiny bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon small calendar"></i>
</div>
<div class="four wide column">
<i class="icon small calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon small certificate"></i>
</div>
<div class="four wide column">
<i class="icon small circle"></i>
</div>
<div class="four wide column">
<i class="icon circle outline"></i>
</div>
<div class="four wide column">
<i class="icon cloud"></i>
</div>
<div class="four wide column">
<i class="icon comment"></i>
</div>
<div class="four wide column">
<i class="icon comment outline"></i>
</div>
<div class="four wide column">
<i class="icon large file"></i>
</div>
<div class="four wide column">
<i class="icon large file outline"></i>
</div>
<div class="four wide column">
<i class="icon large folder"></i>
</div>
<div class="four wide column">
<i class="icon large folder outline"></i>
</div>
<div class="four wide column">
<i class="icon big heart"></i>
</div>
<div class="four wide column">
<i class="icon big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon big map marker"></i>
</div>
<div class="four wide column">
<i class="icon big play"></i>
</div>
<div class="four wide column">
<i class="icon huge square"></i>
</div>
<div class="four wide column">
<i class="icon huge square outline"></i>
</div>
<div class="four wide column">
<i class="icon huge star"></i>
</div>
<div class="four wide column">
<i class="icon huge star outline"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Shapes with Sizes Variation
Reference: https://semantic-ui.com/elements/icon.html#shapes