Semantic-UI Icon Set Communication

Last Updated : 09 Mar, 2022

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 communication. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors. An icon is a glyph used to represent something else and icons represent common ways of communication.

Semantic UI Icon set classes:

address book: This class is used to set the address book icon.
address book outline: This class is used to set the address book outline icon.
address card: This class is used to set the address card icon.
address card outline: This class is used to set the address card outline icon.
american sign language interpreting: This class is used to set the American sign language interpreting.
assistive listening systems: This class is used to set the assistive listening systems.
at: This class is used to set the at sign icon.
bell: This class is used to set the bell sign icon.
bell outline: This class is used to set the bell outline icon.
bell slash: This class is used to set the bell slash icon.
bell slash outline: This class is used to set the bell slash outline icon.
bullhorn: This class is used to set the bullhorn icon.
comment: This class is used to set the comment icon.
comment outline: This class is used to set the comment outline icon.
comment alternate: This class is used to set the comment alternate icon.
comment alternate outline: This class is used to set the comment alternate outline icon.
comments: This class is used to set the comments icon.
comments outline: This class is used to set the comments outline icon.
envelope: This class is used to set the envelope icon.
envelope outline: This class is used to set the envelope outline icon.
envelope open: This class is used to set the envelope open icon.
envelope open outline: This class is used to set the envelope open outline icon.
envelope square: This class is used to set the envelope square icon.
fax: This class is used to set the fax icon.
inbox: This class is used to set the inbox icon.
language: This class is used to set the language icon.
microphone: This class is used to set the microphone icon.
microphone slash: This class is used to set the microphone slash icon.
mobile: This class is used to set the mobile icon.
mobile alternate: This class is used to set the mobile alternate icon.
paper plane: This class is used to set the paper plane icon.
paper plane outline: This class is used to set the paper plane outline icon.
phone: This class is used to set the phone icon.
phone square: This class is used to set the phone square icon.
phone volume: This class is used to set the phone volume icon.
rss: This class is used to set the rss icon.
rss square: This class is used to set the rss square icon.
tty: This class is used to set the tty icon.
wifi: This class is used to set the wifi icon.

Syntax:

<i class="icon.... address book"></i>

Note: The developer can use the above classes as per the need using the above syntax.

Example 1: This code demonstrates all communication icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />     
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic-UI Icon Set Communication</strong> 
        <br/> 
  
        <div class="ui container"> 
            <div class="ui grid"> 
                <div class="three wide column"> 
                    <i class="address book icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="address book outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="address card icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="address card outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="american sign language interpreting icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="assistive listening systems icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="at icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="bell icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="bell outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="bell slash icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="bell slash outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="bullhorn icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="comment icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="comment outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="comment alternate icon"></i> 
                </div> 
            </div> 
       </div>  
    </center> 
</body> 
</html>

Output:

Example 2: This code demonstrates all communication icon set classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />     
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">Geeksforgeeks</h1> 
        <strong>Semantic UI Icon Set Communication</strong> 
        <br /> 
        <br /> 
        <div class="ui container"> 
            <button class="ui button"> 
                <i class="comment alternate outline icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="comments icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="comments outline icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="envelope icon"></i> 
            </button> 
        </div> 
    </center> 
</body> 
</html> 