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 Arrows. Semantic UI provides some most commonly used icon classes for arrows which were mostly used in navigation to the next pages or to indicate some important points, etc.
Semantic UI Icon Set Arrows classes:
- angle double down: This class is used to show the angle double down icon.
- angle double left: This class is used to show the angle double left icon.
- angle double right: This class is used to show the angle double right icon.
- angle double up: This class is used to show the angle double up icon.
- angle down: This class is used to show the angle down icon.
- angle left: This class is used to show the angle left icon.
- angle right: This class is used to show the angle right icon.
- angle up: This class is used to show the angle up icon.
- arrow alternate circle down: This class is used to arrow alternate circle down icon.
- arrow alternate circle down outline: This class is used to show the outline of the arrow alternate circle down icon.
- arrow alternate circle left: This class is used to show the arrow alternate circle left icon.
- arrow alternate circle left outline: This class is used to show the outline of the arrow alternate circle left icon.
- arrow alternate circle right: This class is used to show the arrow alternate circle right icon.
- arrow alternate circle right outline: This class is used to show the outline of the arrow alternate circle right icon.
- arrow alternate circle up: This class is used to show the arrow alternate circle up icon.
- arrow alternate circle up outline: This class is used to show the outline of the arrow alternate circle up icon.
- arrow circle down: This class is used to show the arrow circle down icon.
- arrow circle left: This class is used to show the arrow circle left icon.
- arrow circle right: This class is used to show the arrow circle right icon.
- arrow circle up: This class is used to show the arrow circle up icon.
- arrow down: This class is used to show the arrow down icon.
- arrow left: This class is used to show the arrow-left icon.
- arrow right: This class is used to show the arrow right icon.
- arrow up: This class is used to show the arrow up icon.
- arrows alternate: This class is used to show the arrows alternate icon.
- arrows alternate horizontal: This class is used to show the arrows alternate horizontal icon.
- arrows alternate vertical: This class is used to show the arrows alternate vertical icon.
- caret down: This class is used to show the caret down icon.
- caret left: This class is used to show the caret left icon.
- caret right: This class is used to show the caret right icon.
- caret square down: This class is used to show the caret square down icon.
- caret square down outline: This class is used to show the caret square down outline icon.
- caret square left: This class is used to show the caret square left icon.
- caret square left outline: This class is used to show the caret square left outline icon.
- caret square right: This class is used to show the caret square right icon.
- caret square right outline: This class is used to show the caret square right outline icon.
- caret square up: This class is used to show the caret square up icon.
- caret square up outline: This class is used to show the caret square up outline icon.
- caret up: This class is used to show the caret up icon.
- cart arrow down: This class is used to show the cart arrow down icon.
- chart line: This class is used to show the chart line icon.
- chevron circle down: This class is used to show the chevron circle down icon.
- chevron circle left: This class is used to show the chevron circle left icon.
- chevron circle right: This class is used to show the chevron circle right icon.
- chevron circle up: This class is used to show the chevron circle up icon.
- chevron down: This class is used to show the chevron down icon.
- chevron left: This class is used to show the chevron left icon.
- chevron right: This class is used to show the chevron right icon.
- chevron up: This class is used to show the chevron up icon.
- cloud download: This class is used to show the cloud download icon.
- cloud upload: This class is used to show the cloud upload icon.
- download: This class is used to show the download icon.
- exchange alternate: This class is used to show the exchange alternate icon.
- expand arrows alternate: This class is used to show the expand arrows alternate icon.
- external alternate: This class is used to show the external alternate icon.
- external square alternate: This class is used to show the external square alternate icon.
- hand point down: This class is used to show the hand point down icon.
- hand point down outline: This class is used to show the hand point down outline icon.
- hand point left: This class is used to show the hand point left icon.
- hand point left outline: This class is used to show the hand point left outline icon.
- hand point right: This class is used to show the hand point right icon.
- hand point right outline: This class is used to show the hand point right outline icon.
- hand point up: This class is used to show the hand point up icon.
- hand point up outline: This class is used to show the hand point up outline icon.
- hand pointer: This class is used to show the audio description icon.
- hand pointer outline: This class is used to show the hand pointer outline icon.
- history: This class is used to show the history icon.
- level down alternate: This class is used to show the level down alternate icon.
- level up alternate: This class is used to show the level up alternate icon.
- location arrow: This class is used to show the location arrow icon.
- long arrow alternate down: This class is used to show the long arrow alternate down icon.
- long arrow alternate left: This class is used to show the long arrow alternate left icon.
- long arrow alternate right: This class is used to show the long arrow alternate right icon.
- long arrow alternate up: This class is used to show the long arrow alternate up icon.
- mouse pointer: This class is used to show the mouse pointer icon.
- play: This class is used to show the play icon.
- random: This class is used to show the random icon.
- recycle: This class is used to show the recycle icon.
- redo: This class is used to show the redo icon.
- redo alternate: This class is used to show the redo alternate icon.
- reply: This class is used to show the reply icon.
- reply all: This class is used to show the reply all icon.
- retweet: This class is used to show the retweet icon.
- share: This class is used to show the share icon.
- share square: This class is used to show the share square icon.
- share square outline: This class is used to show the share square outline icon.
- sign in alternate: This class is used to show the sign in the alternate icon.
- sign out alternate: This class is used to show the sign out alternate icon.
- sort: This class is used to show the sort icon.
- sort alphabet down: This class is used to show the sort alphabet down icon.
- sort alphabet up: This class is used to show the sort alphabet up icon.
- sort amount down: This class is used to show the sort amount down icon.
- sort amount up: This class is used to show the sort amount up icon.
- sort down: This class is used to show the sort down icon.
- sort numeric down: This class is used to show the sort numeric down icon.
- sort numeric up: This class is used to show the sort numeric up icon.
- sort up: This class is used to show the sort up icon.
- sync: This class is used to show the sync icon.
- sync alternate: This class is used to show the sync alternate icon.
- text height: This class is used to show the text height icon.
- text width: This class is used to show the text width icon.
- undo: This class is used to show the undo icon.
- undo alternate: This class is used to show the undo alternate icon.
- upload: This class is used to show the upload icon.
Syntax:
<i class="icon....arrow_class "></i>
Example 1: This code demonstrates all Arrows icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Arrows
</strong>
<br />
<br />
<div class="container">
<div class="ui grid">
<div class="three wide column">
<i class="icon big angle double down"></i>
</div>
<div class="three wide column">
<i class="icon big angle double left"></i>
</div>
<div class="three wide column">
<i class="icon big angle double right"></i>
</div>
<div class="three wide column">
<i class="icon big angle double up"></i>
</div>
<div class="three wide column">
<i class="icon big angle down"></i>
</div>
<div class="three wide column">
<i class="icon big angle left"></i>
</div>
<div class="three wide column">
<i class="icon big angle right"></i>
</div>
<div class="three wide column">
<i class="icon big angle up"></i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle down">
</i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle down outline">
</i>
</div>
<div class="three wide column">
<i class="icon big arrow alternate circle left">
</i>
</div>
<div class="three wide column">
<i class="icon big arrow alternate circle left outline">
</i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle right">
</i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle right outline">
</i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle up">
</i>
</div>
<div class="three wide column">
<i class=
"icon big arrow alternate circle up outline">
</i>
</div>
<div class="three wide column">
<i class="icon arrow circle down"></i>
</div>
<div class="three wide column">
<i class="icon big arrow circle left"></i>
</div>
<div class="three wide column">
<i class="icon big arrow circle right"></i>
</div>
<div class="three wide column">
<i class="icon big arrow circle up"></i>
</div>
<div class="three wide column">
<i class="icon big arrow down"></i>
</div>
<div class="three wide column">
<i class="icon big arrow left"></i>
</div>
<div class="three wide column">
<i class="icon big arrow right"></i>
</div>
<div class="three wide column">
<i class="icon big arrow up "></i>
</div>
<div class="three wide column">
<i class="icon big arrows alternate"></i>
</div>
<div class="three wide column">
<i class="icon big arrows alternate horizontal"></i>
</div>
<div class="three wide column">
<i class="icon big arrows alternate vertical"></i>
</div>
<div class="three wide column">
<i class="icon big play caret down"></i>
</div>
<div class="three wide column">
<i class="icon big play caret left "></i>
</div>
<div class="three wide column">
<i class="icon big caret right "></i>
</div>
<div class="three wide column">
<i class="icon big caret square down"></i>
</div>
<div class="three wide column">
<i class="icon big caret square down outline"></i>
</div>
<div class="three wide column">
<i class="icon big caret square left"></i>
</div>
<div class="three wide column">
<i class="icon big caret square left outline"></i>
</div>
<div class="three wide column">
<i class="icon big caret square right"></i>
</div>
<div class="three wide column">
<i class="icon big caret square right outline"></i>
</div>
<div class="three wide column">
<i class="icon big caret square up "></i>
</div>
<div class="three wide column">
<i class="icon big caret square up outline"></i>
</div>
<div class="three wide column">
<i class="icon big caret up"></i>
</div>
<div class="three wide column">
<i class="icon big cart arrow down"></i>
</div>
<div class="three wide column">
<i class="icon big chart line"></i>
</div>
<div class="three wide column">
<i class="icon big chevron circle down"></i>
</div>
<div class="three wide column">
<i class="icon big chevron circle left"></i>
</div>
<div class="three wide column">
<i class="icon big chevron circle right "></i>
</div>
<div class="three wide column">
<i class="icon big chevron circle up"></i>
</div>
<div class="three wide column">
<i class="icon big chevron down"></i>
</div>
<div class="three wide column">
<i class="icon big chevron left"></i>
</div>
<div class="three wide column">
<i class="icon big chevron right"></i>
</div>
<div class="three wide column">
<i class="icon big chevron up "></i>
</div>
<div class="three wide column">
<i class="icon big cloud download"></i>
</div>
<div class="three wide column">
<i class="icon big cloud upload"></i>
</div>
<div class="three wide column">
<i class="icon big download"></i>
</div>
<div class="three wide column">
<i class="icon big exchange alternate"></i>
</div>
<div class="three wide column">
<i class="icon big expand arrows alternate"></i>
</div>
<div class="three wide column">
<i class="icon big external alternate"></i>
</div>
<div class="three wide column">
<i class="icon big external square alternate"></i>
</div>
<div class="three wide column">
<i class="icon big cloud hand point down"></i>
</div>
<div class="three wide column">
<i class="icon big cloud hand point down outline"></i>
</div>
<div class="three wide column">
<i class="icon big cloud hand point left"></i>
</div>
<div class="three wide column">
<i class="icon big hand point left outline"></i>
</div>
<div class="three wide column">
<i class="icon big hand point up"></i>
</div>
<div class="three wide column">
<i class="icon big hand pointer up outline"></i>
</div>
<div class="three wide column">
<i class="icon big history"></i>
</div>
<div class="three wide column">
<i class="icon big level down alternate"></i>
</div>
<div class="three wide column">
<i class="icon big level up alternate "></i>
</div>
<div class="three wide column">
<i class="icon big location arrow"></i>
</div>
<div class="three wide column">
<i class="icon big long arrow alternate down"></i>
</div>
<div class="three wide column">
<i class="icon big long arrow alternate left"></i>
</div>
<div class="three wide column">
<i class="icon big long arrow alternate right"></i>
</div>
<div class="three wide column">
<i class="icon big long arrow alternate up"></i>
</div>
<div class="three wide column">
<i class="icon big mouse pointer"></i>
</div>
<div class="three wide column">
<i class="icon big play"></i>
</div>
<div class="three wide column">
<i class="icon big random"></i>
</div>
<div class="three wide column">
<i class="icon big recycle"></i>
</div>
<div class="three wide column">
<i class="icon big redo"></i>
</div>
<div class="three wide column">
<i class="icon big redo alternate"></i>
</div>
<div class="three wide column">
<i class="icon big reply "></i>
</div>
<div class="three wide column">
<i class="icon big reply all"></i>
</div>
<div class="three wide column">
<i class="icon big share"></i>
</div>
<div class="three wide column">
<i class="icon big share square"></i>
</div>
<div class="three wide column">
<i class="icon big share square outline"></i>
</div>
<div class="three wide column">
<i class="icon big sign in alternate"></i>
</div>
<div class="three wide column">
<i class="icon big sign out alternate"></i>
</div>
<div class="three wide column">
<i class="icon big sort"></i>
</div>
<div class="three wide column">
<i class="icon big sort alphabet down"></i>
</div>
<div class="three wide column">
<i class="icon big sort alphabet up"></i>
</div>
<div class="three wide column">
<i class="icon big sort amount down"></i>
</div>
<div class="three wide column">
<i class="icon big sort amount up"></i>
</div>
<div class="three wide column">
<i class="icon big sort down"></i>
</div>
<div class="three wide column">
<i class="icon big sort numeric down"></i>
</div>
<div class="three wide column">
<i class="icon big sort numeric up"></i>
</div>
<div class="three wide column">
<i class="icon big sort up"></i>
</div>
<div class="three wide column">
<i class="icon big sync"></i>
</div>
<div class="three wide column">
<i class="icon big sync alternate"></i>
</div>
<div class="three wide column">
<i class="icon big text height "></i>
</div>
<div class="three wide column">
<i class="icon big text width "></i>
</div>
<div class="three wide column">
<i class="icon big undo"></i>
</div>
<div class="three wide column">
<i class="icon big undo alternate"></i>
</div>
<div class="three wide column">
<i class="icon big upload"></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Arrows
Example 2: This code demonstrates an example of Arrows icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Icon Set Arrows</title>
<link rel="stylesheet"
href=
</script>
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Arrows
</strong>
<br />
<br />
<div class="container">
<div class="ui buttons">
<button class="ui icon button">
<i class="angle double left icon"></i>
</button>
<button class="ui icon button">
<i class="angle left icon"></i>
</button>
<button class="ui button">
1
</button>
<button class="ui button">
2
</button>
<button class="ui button">
2
</button>
<button class="ui button">
4
</button>
<button class="ui button">
5
</button>
<button class="ui right icon button">
<i class="angle right icon"></i>
</button>
<button class="ui icon button">
<i class="angle double right icon"></i>
</button>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Icon Set Arrows
Reference: https://semantic-ui.com/elements/icon.html#arrows