Semantic-UI Icon Set Images

Last Updated : 22 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 Images. The Semantic UI provides some most commonly used icon classes for Images for video editing apps or cameras and here are the classes.

Semantic UI Icon Set Images Classes:

adjust: This class is used to show the adjust icon.
bolt: This class is used to show the bolt icon.
camera: This class is used to show the camera icon.
camera retro: These classes are used to show the camera retro icon.
clone: This class is used to show the clone icon.
clone outline: These classes are used to show the outline of the clone icon.
compress: This class is used to show the compressed icon.
expand: This class is used to show the expand icon.
eye: This class is used to show the eye icon.
eye dropper: These classes are used to show the eyedropper icon.
eye slash: These classes are used to show the eye slash icon.
eye slash outline: These classes are used to show the outline of the eye slash icon.
file image: These classes are used to show the file image icon.
file image outline: These classes are used to show the outline of the file image icon.
film: This class is used to show the film icon.
id badge: These classes are used to show the id badge icon.
id badge outline: These classes are used to show the outline of the id badge icon.
id card: These classes are used to show the id card icon.
id card outline: These classes are used to show the outline of the id card icon.
image: This class is used to show the image icon.
image outline: These classes are used to show the outline of the image icon.
images: This class is used to show the images icon.
images outline: These classes are used to show the outline of the images icon.
sliders horizontal: These classes are used to show the slider’s horizontal icon.
tint: This class is used to show the tint icon.

Syntax:

<i class="icon.... images-class"></i>

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

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Images</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 class="ui green header">
          GeeksforGeeks
        </h1>
        <strong>
            Semantic-UI Icon Set Images
        </strong>
        <br />
        <br />
 
        <div class=" ui container">
 
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big  adjust "></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big bolt "></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big camera"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big camera retro"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big  clone"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big clone outline"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big compress "></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big expand"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big eye"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big eye dropper"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big eye slash "></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big  eye slash outline"></i>
                </div>
 
                <div class="three wide column">
                    <i class="icon big  file image"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  file image outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  film"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  id badge"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  id badge outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  id card"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  id card outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  image"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big  image outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sliders horizontal"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tint"></i>
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

Semantic-UI Icon Set Images

Example 2: This code demonstrates the images icon set classes.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Images</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 class="ui green header">
          GeeksforGeeks
        </h1>
        <strong>
            Semantic-UI Icon Set Images
        </strong>
        <br />
        <br />
 
        <div class=" ui container">
            <div class="ui icon black buttons">
                <button class="ui button">
                    <i class="camera icon"></i>
                </button>
                <button class="ui button">
                    <i class="images icon"></i>
                </button>
                <button class="ui button">
                    <i class="clone icon"></i>
                </button>
                <button class="ui button">
                    <i class="expand icon"></i>
                </button>
                <button class="ui button">
                    <i class="compress icon"></i>
                </button>
            </div>
        </div>
    </center>
</body>
 
</html>