Semantic-UI Icon Set Currency

Last Updated : 07 Mar, 2022

Semantic UI is an open-source CSS framework based on CSS and jQuery. It helps in building layouts faster with its pre-built elements and modules. In this article, we will be seeing the currency icon set provided by Semantic UI.

Semantic UI icons set currency offers us a different variety of things and activities. There are a total of 11 icons in the currency icon set which can be used to represent currencies or units of currency of various countries like a dollar sign, euro sign, yen sign, ruble sign and so many as mentioned below. In this article, we will know about the Semantic UI currency set icons in various forms like colored icons or units or icons of different sizes.

Semantic UI icon set currency classes:

dollar sign: These classes are used to show the dollar currency sign.
euro sign: These classes are used to show the euro currency sign.
lira sign: These classes are used to show the lira currency sign.
money bill alternate: These classes are used to show the money bill icon.
money bill alternate outline: These classes are used to show the outlined money bill icon.
pound sign: These classes are used to show the pound currency sign.
ruble sign: These classes are used to show the ruble currency sign.
rupee sign: These classes are used to show the rupee currency sign.
shekel sign: These classes are used to show the shekel currency sign.
won sign: These classes are used to show the won currency sign.
yen sign: These classes are used to show the yen currency sign.

Syntax:

<i class="dollar sign icon"></i>

Example1: The example below illustrates the use of all 11 icons listed above.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Currency</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    
    <style>
        .ui.container {
            text-align:center;
        }
 
        h4{
            margin-top:0px;
        }
        .ui.grid {
            margin-top:30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 class="ui green header">GeeksforGeeks</h1>
            <strong>Semantic UI - Icon Set Currency</strong>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon big dollar sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big euro sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big lira sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big money bill alternate"></i>
            </div>
            <div class="four wide column">
                <i class="icon big money bill alternate outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big pound sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big ruble sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big rupee sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big shekel sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big won sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big yen sign"></i>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Semantic-UI Icon Set Currency

Example 2: The example below shows the use of currency set icons with different colors.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Currency</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
     
    <style>
        .ui.container {
            text-align: center;
        }
        h4 {
            margin-top: 0px;
        }
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 class="ui green header">GeeksforGeeks</h1>
            <strong>Semantic UI - Icon Set Currency</strong>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon red big dollar sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon yellow big euro sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon green big lira sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon teal big money bill alternate"></i>
            </div>
            <div class="four wide column">
                <i class="icon grey big money bill alternate outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon blue big pound sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon violet big ruble sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon pink big rupee sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon brown big shekel sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon orange big won sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon big yen sign"></i>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Semantic-UI Icon Set Currency

Example 3: The example below shows the use of currency set icons with size variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Currency</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
   
    <style>
        .ui.container {
            text-align: center;
        }
        h4 {
            margin-top: 0px;
        }
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div>
            <h1 class="ui green header">GeeksforGeeks</h1>
            <strong>Semantic UI - Icon Set Currency</strong>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon small dollar sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon small euro sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon small lira sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon money bill alternate"></i>
            </div>
            <div class="four wide column">
                <i class="icon money bill alternate outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon pound sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon large ruble sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon large rupee sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon large shekel sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon huge won sign"></i>
            </div>
            <div class="four wide column">
                <i class="icon huge yen sign"></i>
            </div>
        </div>
    </div>
</body>
</html>