Semantic UI is a component-rich UI framework used for designing and theming websites. In this article, we will be seeing the Users and People icons that come with Semantic UI. There are a total of 31 icons in the Users and People icon set.
Semantic-UI Icon Set Users & People Classes:
- address with book: These classes are used together to show the address book icon.
- address with book and outline: These classes are used together to show the outlined address book icon.
- address with card: These classes are used together to show the address card icon.
- address with card and outline: These classes are used together to show the outlined address card icon.
- bed: This class is used to show the bed icon.
- blind: This class is used to show an icon showing a blind person walking.
- child: This class is used to show a child icon.
- female: This class is used to show the icon representing the female gender.
- frown: This class is used to show an icon showing a frown face.
- frown with outline: These classes are used to show an icon showing an outlined frown face.
- id with badge: These classes are used together to show the id badge icon.
- id with badge and outline: These classes are used together to show the outlined id badge icon.
- id with card: These classes are used together to show the id card icon.
- id with card and outline: These classes are used together to show the outlined id card icon.
- male: This class is used to show the icon representing the male gender.
- meh: This class is used to show a face having a meh expression.
- meh with outline: These classes are used to show an outlined face having a meh expression.
- power with off: These classes are used together to show the power off icon.
- smile: This class is used to show a smiling face icon.
- smile with outline: These classes are used together to show an outlined smiling face icon.
- street with view: These classes are used together to show the street view icons.
- user: This class is used to show a simple user icon.
- user with outline: These classes are used together to show an outlined user icon.
- user with circle: These classes are used together to show a circular user icon.
- user with circle and outline: These classes are used together to show an outlined circular user icon.
- user with md: These classes are used to show a medical-related user icon.
- user with plus: These classes are used together to show a user with a plus icon.
- user with secret: These classes are used together to show a secret user icon.
- user with times: These classes are used together to show a user with a times icon.
- users: This class is used to show an icon representing a group of users.
- wheelchair: This class is used to show an icon representing a person in a wheelchair.
Syntax:
<i class="icon Users-&-People-Icon-Class/Classes"></i>
Example: The below example shows the use of all 31 icons listed above.
HTML
<!DOCTYPE html><html>
<head>
<title>Semantic UI - Icon Set Users & People</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 Users & People</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big address book"></i>
</div>
<div class="three wide column">
<i class="icon big address book outline"></i>
</div>
<div class="three wide column">
<i class="icon big address card"></i>
</div>
<div class="three wide column">
<i class="icon big address card outline"></i>
</div>
<div class="three wide column">
<i class="icon big bed"></i>
</div>
<div class="three wide column">
<i class="icon big blind"></i>
</div>
<div class="three wide column">
<i class="icon big child"></i>
</div>
<div class="three wide column">
<i class="icon big female"></i>
</div>
<div class="three wide column">
<i class="icon big frown"></i>
</div>
<div class="three wide column">
<i class="icon big frown outline"></i>
</div>
<div class="three wide column">
<i class="icon big id badge"></i>
</div>
<div class="three wide column">
<i class="icon big id badge outline"></i>
</div>
<div class="three wide column">
<i class="icon big id card"></i>
</div>
<div class="three wide column">
<i class="icon big id card outline"></i>
</div>
<div class="three wide column">
<i class="icon big male"></i>
</div>
<div class="three wide column">
<i class="icon big meh"></i>
</div>
<div class="three wide column">
<i class="icon big meh outlinne"></i>
</div>
<div class="three wide column">
<i class="icon big power off"></i>
</div>
<div class="three wide column">
<i class="icon big smile"></i>
</div>
<div class="three wide column">
<i class="icon big smile outline"></i>
</div>
<div class="three wide column">
<i class="icon big street view"></i>
</div>
<div class="three wide column">
<i class="icon big user"></i>
</div>
<div class="three wide column">
<i class="icon big user outline"></i>
</div>
<div class="three wide column">
<i class="icon big user circle"></i>
</div>
<div class="three wide column">
<i class="icon big user circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big user md"></i>
</div>
<div class="three wide column">
<i class="icon big user plus"></i>
</div>
<div class="three wide column">
<i class="icon big user secret"></i>
</div>
<div class="three wide column">
<i class="icon big user times"></i>
</div>
<div class="three wide column">
<i class="icon big users"></i>
</div>
<div class="three wide column">
<i class="icon big wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Users and People
Example2: The below example shows how to use users & people icons with different colors and sizes.
HTML
<!DOCTYPE html><html>
<head>
<title>Semantic UI - Icon Set Users & People</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 Users & People</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon red small address book"></i>
</div>
<div class="three wide column">
<i class="icon blue small address book outline"></i>
</div>
<div class="three wide column">
<i class="icon green small address card"></i>
</div>
<div class="three wide column">
<i class="icon teal small address card outline"></i>
</div>
<div class="three wide column">
<i class="icon yellow small bed"></i>
</div>
<div class="three wide column">
<i class="icon blue blind"></i>
</div>
<div class="three wide column">
<i class="icon violet child"></i>
</div>
<div class="three wide column">
<i class="icon purple female"></i>
</div>
<div class="three wide column">
<i class="icon pink frown"></i>
</div>
<div class="three wide column">
<i class="icon brown frown outline"></i>
</div>
<div class="three wide column">
<i class="icon grey large id badge"></i>
</div>
<div class="three wide column">
<i class="icon black large id badge outline"></i>
</div>
<div class="three wide column">
<i class="icon yellow large id card"></i>
</div>
<div class="three wide column">
<i class="icon teal large id card outline"></i>
</div>
<div class="three wide column">
<i class="icon grey big male"></i>
</div>
<div class="three wide column">
<i class="icon pink big meh"></i>
</div>
<div class="three wide column">
<i class="icon blue big meh outlinne"></i>
</div>
<div class="three wide column">
<i class="icon purple big power off"></i>
</div>
<div class="three wide column">
<i class="icon red big smile"></i>
</div>
<div class="three wide column">
<i class="icon orange big smile outline"></i>
</div>
<div class="three wide column">
<i class="icon olive huge street view"></i>
</div>
<div class="three wide column">
<i class="icon green huge user"></i>
</div>
<div class="three wide column">
<i class="icon teal huge user outline"></i>
</div>
<div class="three wide column">
<i class="icon violet huge user circle"></i>
</div>
<div class="three wide column">
<i class="icon blue big user circle outline"></i>
</div>
<div class="three wide column">
<i class="icon pink big user md"></i>
</div>
<div class="three wide column">
<i class="icon grey big user plus"></i>
</div>
<div class="three wide column">
<i class="icon brown big user secret"></i>
</div>
<div class="three wide column">
<i class="icon pink big user times"></i>
</div>
<div class="three wide column">
<i class="icon violet big users"></i>
</div>
<div class="three wide column">
<i class="icon pink big wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#users–people