Open In App

Semantic-UI Icon Set

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing and responsive. An icon is a glyph used to represent something else. Semantic UI provides thousands of icons through a complete port of Font Awesome 5.0.8 designed by the Font Awesome team for its standard icon set. These icons serve a very similar function to text on a page and can be formatted like text. These icons are inline elements so they do not affect the formatting of text. To use icon set in Semantic UI, we use the special tag <i> which allows for an abbreviated markup when sitting alongside text. The <i> tag uses the class icon along with the name of the icon. The class name used with the <i> tag determines the shape of the icon. For example, wheelchair, sign language, question circle, etc. To color the icons, we can add the desired color as a class name and the icon will have that color as foreground color.

Syntax:

<i class="<icon-name> icon"></i>

Example 1: The following example demonstrates the different icons provided by semantic UI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
         rel="stylesheet" />
</head>
  
<body style="padding: 20px;">
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>Semantic UI Icon Set</strong>
    </center><br>
      
    <i class="american sign language interpreting icon"></i>
    <i class="assistive listening systems icon"></i>
    <i class="audio description icon"></i>
    <i class="blind icon"></i>
    <i class="braille icon"></i>
    <i class="angle double down icon"></i>
    <i class="angle double left icon"></i>
    <i class="angle double right icon"></i>
    <i class="angle double up icon"></i>
    <i class="angle down icon"></i>
    <i class="angle left icon"></i>
    <i class="angle right icon"></i>
    <i class="angle up icon"></i>
    <i class="arrow alternate circle down icon"></i>
    <i class="arrow alternate circle down outline icon"></i>
    <i class="arrow alternate circle left icon"></i>
    <i class="arrow alternate circle left outline icon"></i>
    <i class="arrow alternate circle right icon"></i>
    <i class="arrow alternate circle right outline icon"></i>
    <i class="arrow alternate circle up icon"></i>
    <i class="arrow alternate circle up outline icon"></i>
    <i class="arrow circle down icon"></i>
    <i class="arrow circle left icon"></i>
    <i class="arrow circle right icon"></i>
    <i class="arrow circle up icon"></i>
    <i class="arrow down icon"></i>
    <i class="arrow left icon"></i>
    <i class="arrow right icon"></i>
    <i class="arrow up icon"></i>
    <i class="arrows alternate icon"></i>
    <i class="arrows alternate horizontal icon"></i>
    <i class="arrows alternate vertical icon"></i>
    <i class="caret down icon"></i>
</body>
  
</html>


Output:

Output

Example 2: The following example demonstrates the icons in different colors provided by semantic UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <link href=
        rel="stylesheet" />
</head>
<body style="padding: 20px;">
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>Semantic UI Icon Set</strong>
        <br>
        <i class="red users icon"></i>
        <i class="orange users icon"></i>
        <i class="yellow users icon"></i>
        <i class="olive users icon"></i>
        <i class="green users icon"></i><br/>
        <i class="teal users icon"></i>
        <i class="blue users icon"></i>
        <i class="violet users icon"></i>
        <i class="purple users icon"></i>
        <i class="pink users icon"></i><br/>
        <i class="brown users icon"></i>
        <i class="grey users icon"></i>
        <i class="black users icon"></i>
    </center>
</body>
    
</html>


Output:

Output

Reference: https://semantic-ui.com/elements/icon.html#/icon



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads