Open In App

Spectre Icons

Improve
Improve
Like Article
Like
Save
Share
Report

In the documentation, it is mentioned as Icons.css. The Icon.css is a single element that is responsive and pure CSS icons, there are three types of icons available in spectre object icons, action icons and navigation icons. All of the icons can have different sizes there is three variant of sizes like it can be 2 times larger, 3 times larger or 4 times larger for that we need to use the Spectre Icon size.

Spectre Icons Types:

Note: There is one more thing icon that is the size which is described in the first paragraph.

Spectre Icons Class:

  • icon: This class is a must to add any icon using spectre.

Syntax:

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

Below example illustrate the Spectre Icons:

Example 1: In this example, we will create 4 Object buttons in different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Object Size icons Class</strong>
        <br><br>
        <div>
            Mail icon:
            <button>
             <i class="icon icon-mail"></i>
            </button>
            People icon 2x:
            <button>
             <i class="icon icon-2x icon-people"></i>
            </button>
            Message icon 3x:
            <button>
            <i class="icon icon-3x icon-message"></i>
            </button>
            Photo icon 4x:
            <button>
            <i class="icon icon-4x icon-photo"></i>
            </button>
        </div>
    </center>
</body>
  
</html>


Output:

Spectre Icons

Spectre Icons

Example 2: In this example, we will create 4 Action buttons in different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Action Size icons Class</strong>
        <br><br>
        <div>
            Stop icon:
            <button>
             <i class="icon icon-stop"></i>
            </button>
            Shutdown icon 2x:
            <button>
             <i class="icon icon-2x icon-shutdown"></i>
            </button>
            Refresh icon 3x:
            <button>
            <i class="icon icon-3x icon-refresh"></i>
            </button>
            Search icon 4x:
            <button>
            <i class="icon icon-4x icon-search"></i>
            </button>
        </div>
    </center>
</body>
  
</html>


Output:

Spectre Icons

Spectre Icons

Example 3: In this example, we will create 4 Navigation buttons in different sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Navigation Size icons Class</strong>
        <br><br>
        <div>
            Downward icon:
            <button>
             <i class="icon icon-downward"></i>
            </button>
            Caret icon 2x:
            <button>
             <i class="icon icon-2x icon-caret"></i>
            </button>
            Menu icon 3x:
            <button>
            <i class="icon icon-3x icon-menu"></i>
            </button>
            Apps icon 4x:
            <button>
            <i class="icon icon-4x icon-apps"></i>
            </button>
        </div>
    </center>
</body>
  
</html>


Output:

Spectre Icons

Spectre Icons

Reference: https://picturepan2.github.io/spectre/elements/icons.html



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