Spectre Object icons

Last Updated : 10 Feb, 2022

The Icon.css is a single element which is responsive and pure css icons. There are three types of icons Navigation icons, Action icons, and Object icons. Here in this articles we will know about the Object icons. Spectre Object icons are used on any object related element.

Spectre Object icons Classes:

icon-mail: This class is used to display the mail icon.
icon-people: This class is used to display the people icon.
icon-message: This class is used to display the message(text) icon.
icon-photo: This class is used to display the photo(gallery) icon.
icon-time: This class is used to display the time(clock) icon.
icon-location: This class is used to display the location icon.
icon-link: This class is used to display the link icon.
icon-emoji: This class is used to display the emoji(smiley) icon.

Syntax:

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

Example: In this example, we will use all the object icons.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Object  icons Class</strong>
        <br><br>
        <div class="container">
            <div>
                Mail:
                <button class="btn btn-success">
                 <i class="icon icon-mail"></i>
                </button>
                People:
                <button class="btn btn-success">
                <i class="icon icon-people"></i>
                </button>
                Message:
                <button class="btn btn-success">
                <i class="icon icon-message"></i>
                </button>
                Photo:
                <button class="btn btn-success">
                <i class="icon icon-photo"></i>
                </button>
            </div>
            <br>
            <div>
                Time:
                <button class="btn btn-success">
                 <i class="icon icon-time"></i>
                </button>
                Location:
                <button class="btn btn-success">
                    <i class="icon icon-location"></i>
                </button>
                Refresh:
                <button class="btn btn-success">
                    <i class="icon icon-refresh"></i>
                </button>
                Emoji:
                <button class="btn btn-success">
                    <i class="icon icon-emoji"></i>
                </button>
            </div>
          </div>
    </center>
</body>
 
</html>