Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Semantic-UI Icon Link Variation

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Icon is a glyph that is used to display something else in place of text to save space and time. Icons are used to help users to navigate around and have the same meaning across all languages and hence many items need not be written in different languages.

Semantic UI Icon link variation helps to format an icon as a link. The link variation adds a hover effect to the icon and changes the mouse pointer as a cursor for links.

Semantic UI Icon Link Variation Classes: 

  • link: On adding this class, we can format an icon as a link that has all features of the link like hover effect and mouse pointer to be as a cursor.

Syntax: Add the link class to make the icon a link as follows.

<i class="link icon">

Example: The below example illustrates the Semantic UI Icon link variation. In the following example, the icons are formatted as links by adding the link class.


<!DOCTYPE html>
        <link href=
        <script src=
        <script src=
        <div class="ui container">
                <h1 class="ui header green"
                      Semantic UI Icon Link Variation
                <div class="ui segment">
                    <i class="link cloud huge icon"></i>
                    <i class="link globe huge icon"></i>



My Personal Notes arrow_drop_up
Last Updated : 14 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials