Semantic-UI Icon Set Brands

Last Updated : 08 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
In this article, we are going to learn about Icon Set Brands. It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks. A Semantic UI label is used to create meaningful content classifications. An icon is a glyph used to represent something else and it can represent logos to common brands.

Semantic-UI Label Content icon Class:

*brand-icon-name: This class is used to include the barns icon inside the label.

Syntax:

</i> <i class="*brand-icon-name icon"></i>

Note: To know all the brand names you can check this page https://semantic-ui.com/elements/icon.html#brands

Below example illustrates the Semantic-UI Icon Set Brands:

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Brands</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1 class="ui header green">
          GeeksForGeeks
        </h1>
        <h2>Semantic UI Icon Set Brands</h2>
        <i class="youtube large icon"> 
          youtube
        </i>
        <br><br><br>
        <i class="whatsapp large icon"> 
          whatsapp
        </i>
        <br><br><br>
        <i class="google large icon"> 
          google
        </i>
        <br><br><br>
        <i class="instagram large icon"> 
          instagram
        </i>
    </center>
</body>
 
</html>

Output:

Semantic-UI Icon Set Brands

Example 2:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Icon Set Brands</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1 class="ui header green">
          GeeksForGeeks
        </h1>
        <h2>Semantic UI Icon Set Brands</h2>
        <i class="soundcloud large icon red">
          soundcloud
        </i>
        <br><br><br>
        <i class="vimeo large icon grey">
          vimeo 
        </i>
        <br><br><br>
        <i class="tumblr large icon purple">
          tumblr 
        </i>
        <br><br><br>
        <i class="twitter large icon blue">
          twitter 
        </i>
        <br><br><br>
    </center>
</body>
 
</html>