Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. The icons add more beauty to the website than the textual representation.
In this article, let us see about the icon set of Business. Semantic UI provides some most commonly used icon classes for Business which were mostly used in business or financial applications.
Semantic UI Icon set business classes:
- address book: This class is used to show the address book icon.
- address book outline: This class is used to show the address book outline icon.
- address card: This class is used to show the address card icon.
- address card outline: This class is used to show the address card outline icon.
- archive: This class is used to show the archive icon.
- balance scale: This class is used to show the balance scale icon.
- birthday cake: This class is used to show the birthday cake icon.
- book: This class is used to show the book icon.
- briefcase: This class is used to show the briefcase icon.
- building: This class is used to show the building icon.
- building outline: This class is used to show the building outline icon.
- bullhorn: This class is used to show the bullhorn icon.
- bullseye: This class is used to show the bullseye icon.
- calculator: This class is used to show the calculator icon.
- calendar: This class is used to show the calendar icon.
- calendar outline: This class is used to show the calendar outline icon.
- calendar alternate: This class is used to show the calendar alternate icon.
- calendar alternate outline: This class is used to show the calendar alternate outline icon.
- certificate: This class is used to show the certificate icon.
- chart area: This class is used to show the chart area icon.
- chart bar: This class is used to show the chart bar icon.
- chart bar outline: This class is used to show the chart bar outline icon.
- chart line: This class is used to show the chart line icon.
- chart pie: This class is used to show the chart pie icon.
- clipboard: This class is used to show the clipboard icon.
- clipboard outline: This class is used to show the clipboard outline icon.
- coffee: This class is used to show the coffee icon.
- columns: This class is used to show the columns icon.
- compass: This class is used to show the compass icon.
- compass outline: This class is used to show the compass outline icon.
- copy: This class is used to show the copy icon.
- copy outline: This class is used to show the copy outline icon.
- copyright: This class is used to show the copyright icon.
- copyright outline: This class is used to show the copyright outline icon.
- cut: This class is used to show the cut icon.
- edit: This class is used to show the edit icon.
- edit outline: This class is used to show the edit outline icon.
- envelope: This class is used to show the envelope icon.
- envelope outline: This class is used to show the envelope outline icon.
- envelope open: This class is used to show the envelope open icon.
- envelope open outline: This class is used to show the envelope open outline icon.
- envelope square: This class is used to show the envelope square icon.
- eraser: This class is used to show the eraser icon.
- fax: This class is used to show the fax icon.
- file: This class is used to show the file icon.
- file outline: This class is used to show the file outline icon.
- file alternate: This class is used to show the file alternate icon.
- file alternate outline: This class is used to show the file alternate outline icon.
- folder: This class is used to show the folder icon.
- folder outline: This class is used to show the folder outline icon.
- folder open: This class is used to show the folder open icon.
- folder open outline: This class is used to show the folder open outline icon.
- globe: This class is used to show the globe icon.
- industry: This class is used to show the audio industry icon.
- paperclip: This class is used to show the paperclip icon.
- paste: This class is used to show the paste icon.
- pen square: This class is used to show the pen square icon.
- pencil alternate: This class is used to show the pencil alternate icon.
- percent: This class is used to show the percent icon.
- phone: This class is used to show the phone icon.
- phone square: This class is used to show the phone square icon.
- phone volume: This class is used to show the phone volume icon.
- registered: This class is used to show the registered icon.
- registered outline: This class is used to show the registered outline icon.
- save: This class is used to show the save icon.
- save outline: This class is used to show the save outline icon.
- sitemap: This class is used to show the sitemap icon.
- sticky note: This class is used to show the sticky note icon.
- sticky note outline: This class is used to show the sticky note outline icon.
- suitcase: This class is used to show the suitcase icon.
- table: This class is used to show the table icon.
- tag: This class is used to show the tag icon.
- tags: This class is used to show the tags icon.
- tasks: This class is used to show the tasks icon.
- thumbtack: This class is used to show the thumbtack icon.
- trademark: This class is used to show the trademark icon.
Syntax:
<i class="icon....business_class "></i>
Example 1: This code demonstrates all business icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Business
</strong>
<br />
<br />
<div class="container">
<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 archive"></i>
</div>
<div class="three wide column">
<i class="icon big balance scale"></i>
</div>
<div class="three wide column">
<i class="icon big birthday cake"></i>
</div>
<div class="three wide column">
<i class="icon big briefcase"></i>
</div>
<div class="three wide column">
<i class="icon big building"></i>
</div>
<div class="three wide column">
<i class="icon big building outline"></i>
</div>
<div class="three wide column">
<i class="icon big bullhorn"></i>
</div>
<div class="three wide column">
<i class="icon big bullseye"></i>
</div>
<div class="three wide column">
<i class="icon big calculator"></i>
</div>
<div class="three wide column">
<i class="icon big calendar "></i>
</div>
<div class="three wide column">
<i class="icon big calendar outline"></i>
</div>
<div class="three wide column">
<i class="icon big calendar alternate "></i>
</div>
<div class="three wide column">
<i class="icon big calendar alternate outline "></i>
</div>
<div class="three wide column">
<i class="icon big certificate"></i>
</div>
<div class="three wide column">
<i class="icon big chart area"></i>
</div>
<div class="three wide column">
<i class="icon big chart bar"></i>
</div>
<div class="three wide column">
<i class="icon big chart bar outline"></i>
</div>
<div class="three wide column">
<i class="icon big chart line"></i>
</div>
<div class="three wide column">
<i class="icon big chart pie"></i>
</div>
<div class="three wide column">
<i class="icon big clipboard "></i>
</div>
<div class="three wide column">
<i class="icon big clipboard outline"></i>
</div>
<div class="three wide column">
<i class="icon big coffee"></i>
</div>
<div class="three wide column">
<i class="icon big columns"></i>
</div>
<div class="three wide column">
<i class="icon big compass"></i>
</div>
<div class="three wide column">
<i class="icon big compass outline"></i>
</div>
<div class="three wide column">
<i class="icon big copy "></i>
</div>
<div class="three wide column">
<i class="icon big copy outline"></i>
</div>
<div class="three wide column">
<i class="icon big copyright"></i>
</div>
<div class="three wide column">
<i class="icon big copyright outline"></i>
</div>
<div class="three wide column">
<i class="icon big cut"></i>
</div>
<div class="three wide column">
<i class="icon big edit"></i>
</div>
<div class="three wide column">
<i class="icon big edit outline"></i>
</div>
<div class="three wide column">
<i class="icon big envelope"></i>
</div>
<div class="three wide column">
<i class="icon big envelope outline"></i>
</div>
<div class="three wide column">
<i class="icon big envelope open"></i>
</div>
<div class="three wide column">
<i class="icon big envelope open outline"></i>
</div>
<div class="three wide column">
<i class="icon big envelope square"></i>
</div>
<div class="three wide column">
<i class="icon big eraser"></i>
</div>
<div class="three wide column">
<i class="icon big fax"></i>
</div>
<div class="three wide column">
<i class="icon big file "></i>
</div>
<div class="three wide column">
<i class="icon big file outline"></i>
</div>
<div class="three wide column">
<i class="icon big file alternate"></i>
</div>
<div class="three wide column">
<i class="icon big file alternate outline"></i>
</div>
<div class="three wide column">
<i class="icon big folder"></i>
</div>
<div class="three wide column">
<i class="icon big folder outline"></i>
</div>
<div class="three wide column">
<i class="icon big folder open "></i>
</div>
<div class="three wide column">
<i class="icon big folder open outline "></i>
</div>
<div class="three wide column">
<i class="icon big globe"></i>
</div>
<div class="three wide column">
<i class="icon big industry"></i>
</div>
<div class="three wide column">
<i class="icon big paperclip "></i>
</div>
<div class="three wide column">
<i class="icon big paste"></i>
</div>
<div class="three wide column">
<i class="icon big pen square"></i>
</div>
<div class="three wide column">
<i class="icon big pencil alternate"></i>
</div>
<div class="three wide column">
<i class="icon big percent"></i>
</div>
<div class="three wide column">
<i class="icon big phone"></i>
</div>
<div class="three wide column">
<i class="icon big phone square"></i>
</div>
<div class="three wide column">
<i class="icon big phone volume"></i>
</div>
<div class="three wide column">
<i class="icon big registered"></i>
</div>
<div class="three wide column">
<i class="icon big registered outline"></i>
</div>
<div class="three wide column">
<i class="icon big save"></i>
</div>
<div class="three wide column">
<i class="icon big registered outline"></i>
</div>
<div class="three wide column">
<i class="icon big save outline"></i>
</div>
<div class="three wide column">
<i class="icon big sitemap"></i>
</div>
<div class="three wide column">
<i class="icon big sticky note"></i>
</div>
<div class="three wide column">
<i class="icon big sticky note outline"></i>
</div>
<div class="three wide column">
<i class="icon big suitcase"></i>
</div>
<div class="three wide column">
<i class="icon big table"></i>
</div>
<div class="three wide column">
<i class="icon big tag"></i>
</div>
<div class="three wide column">
<i class="icon big tags"></i>
</div>
<div class="three wide column">
<i class="icon big tasks"></i>
</div>
<div class="three wide column">
<i class="icon big thumbtack"></i>
</div>
<div class="three wide column">
<i class="icon big trademark"></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Business
Example 2: This code demonstrates an example of business icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Business
</strong>
<br />
<br />
<div class="container">
<div class="ui labeled icon menu">
<a class="item">
<i class="tasks icon"></i>
Task Manager
</a>
<a class="item">
<i class="chart line icon"></i>
View Sales
</a>
<a class="item">
<i class="bullhorn icon"></i>
Notifications
</a>
<a class="right item">
<i class="building icon"></i>
Organizations
</a>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Business
Reference: https://semantic-ui.com/elements/icon.html#business