Semantic-UI Icon Set Genders

Last Updated : 24 Feb, 2022

Semantic UI is an open-source CSS based on less and jQuery used for developing beautiful and responsive web interfaces. In this article, we will be seeing the Genders Icon Set provided by Semantic UI. The gender icon set consists of 13 icons used for representing genders or types of sexuality.

Semantic-UI Icon Set Genders Classes:

genderless: This class is used to show the genderless icon.
mars: This class is used to show the mars gender icon.
mars double: This class is used to show the double mars gender icon.
mars stroke: This class is used to show the mars gender icon with stroke.
mars stroke horizontal: This class is used to show the horizontal mars gender icon with stroke.
mars stroke vertical: This class is used to show the vertical mars gender icon with stroke.
mercury: This class is used to show the mercury gender icon.
neuter: This class is used to show the neuter gender icon.
transgender: This class is used to show the transgender icon.
transgender alternate: This class is used to show the alternate transgender icon.
venus: This class is used to show the venus gender icon.
venus double: This class is used to show the double venus icon.
venus mars: This class is used to show the venus and the mars gender icon.

Syntax:

<i class="icon Genders-Icon-Class/Classes"></i>

Example: The example below illustrates the use of all 13 icons listed above.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
  
    <style> 
        .ui.container { 
            text-align: center; 
        } 
  
        h3 { 
            margin-top: 0px; 
        } 
  
        .ui.grid { 
            margin-top: 30px !important; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <div> 
            <h1 style="color: green;">GeeksforGeeks</h1> 
            <h3>Semantic UI - Icon Set Genders</h3> 
        </div> 
        <div class="ui grid"> 
            <div class="three wide column"> 
                <i class="icon big genderless"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mars"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mars double"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mars stroke"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mars stroke horizontal"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mars stroke vertical"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big mercury"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big neuter"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big transgender"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big transgender alternate"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big venus"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big venus double"></i> 
            </div> 
            <div class="three wide column"> 
                <i class="icon big venus mars"></i> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>