Semantic-UI Icon Set Editors

Last Updated : 16 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 editors. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors and the classes are as follows.

An icon is a glyph used to represent something else and it can represent text editors and common editor actions.

Semantic UI icon set editors classes:

clipboard: This class is used to create a clipboard icon.
clipboard outline: This class is used to create a clipboard outline icon.
clone: This class is used to create a clone icon.
clone outline: This class is used to create a clone outline icon.
columns: This class is used to create a columns icon
copy: This class is used to create a copy icon.
copy outline: This class is used to create a copy outline icon.
cut: This class is used to create a cut icon
edit: This class is used to create and edit icon
edit outline: This class is used to create an edit outline icon.
eraser: This class is used to create an eraser icon
file: This class is used to create a file icon
file outline: This class is used to create a file outline icon
file alternate: This class is used to create a file alternate icon
file alternate outline: This class is used to create a file alternate outline icon
font: This class is used to create a font icon
heading: This class is used to create a heading icon
i cursor: This class is used to create an I cursor icon
indent: This class is used to create an indented icon
italic: This class is used to create an italic icon
linkify: This class is used to create a linkify icon
list: This class is used to create a list icon
list alternate: This class is used to create a list of the alternate icon.
list alternate outline: This class is used to create a list alternate outline icon
list ol: This class is used to create a list “ol” icon
list ul: This class is used to create a list ul icon
outdent: This class is used to create an outdent icon.
paper plane: This class is used to create a paper plane icon
paper plane outline: This class is used to create a paper plane outline icon
paperclip: This class is used to create a paperclip icon
paragraph: This class is used to create a paragraph icon
paste: This class is used to create a paste icon
pencil alternate: This class is used to create a pencil alternate icon
print: This class is used to create a print icon
quote left: This class is used to create a quote left icon
quote right: This class is used to create a quote right icon
redo: This class is used to create a redo icon
redo alternate: This class is used to create a redo alternate icon
reply: This class is used to create a reply icon
reply all: This class is used to create a reply all icon
share: This class is used to create a share icon
strikethrough: This class is used to create a strikethrough icon
subscript: This class is used to create a subscript icon
superscript: This class is used to create a superscript icon
sync: This class is used to create a sync icon
sync alternate: This class is used to create a sync alternate icon
table: This class is used to create a table icon
tasks: This class is used to create a tasks icon
text height: This class is used to create a text height icon
text width: This class is used to create a text width icon
th: This class is used to create a th icon
th large: This class is used to create a th large icon
th list: This class is used to create a th list icon
trash: This class is used to create a trash icon
trash alternate: This class is used to create a trash alternate icon
trash alternate outline: This class is used to create a trash alternate outline icon
underline: This class is used to create an underline icon
undo: This class is used to create an undo icon
undo alternate: This class is used to create an undo alternate icon
unlink: This class is used to create an unlink icon

Syntax:

<i class="tasks"></i>

Example 1: This code demonstrates all editor’s 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 Editors</strong> 
        <br/><br/>         
  
        <div class="ui container"> 
            <div class="ui grid"> 
                  
                <div class="three wide column"> 
                    <i class="clipboard outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="clipboard icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="clone icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="clone outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="columns icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="copy icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="copy outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="cut icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="edit icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="edit outline icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="eraser icon"></i> 
                </div> 
  
                <div class="three wide column"> 
                    <i class="file icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="file outline icon"></i> 
                </div> 
                <div class="three wide column"> 
                <i class="file alternate icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="file alternate outline icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="font icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="heading icon"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big save"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big save outline"></i> 
                </div> 
                <div class="three wide column"> 
                    <i class="icon big tint"></i> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
</html> 

Output:

Semantic-UI Icon Set Editors

Example 2: The following code demonstrates another set of icon editors.

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 Editors</strong> 
        <br /> 
        <br /> 
        <div class="ui container"> 
            <button class="ui button"> 
                <i class="i cursor icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="indent icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="italic icon"></i> 
            </button> 
            <button class="ui button"> 
                <i class="linkify icon"></i> 
            </button> 
        </div> 
    </center> 
</body> 
</html> 