Open In App

Spectre Icon size

Improve
Improve
Like Article
Like
Save
Share
Report

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. We can manipulate the size of the icon by using this class.

Spectre Icon size Class:

  • icon-2x: This is used to double the size of the normal icon size.
  • icon-3x: This is used to triple the size of the normal icon size.
  • icon-4x: This is used to 4times the size of the normal icon size.

Note: You can use font-size for any specific size.

Syntax:

<i class="icon icon-2x icon-name"></i>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE CSS Icons 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  icons Class</strong>
        <br><br>
            <div>
                Mail icon 2x:
                <button>
                 <i class="icon icon-2x icon-mail"></i>
                </button>
                Mail icon 3x:
                <button>
                <i class="icon icon-3x icon-mail"></i>
                </button>
                Mail icon 4x:
                <button>
                <i class="icon icon-4x icon-mail"></i>
                </button>
            </div>
     </center>
</body>
  
</html>


Output:

Spectre Icon size

Spectre Icon size

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



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