Semantic-UI Icon Set Maps

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. The icons add more beauty to the website than the textual representation.

In this article, let us see about the icon set of audio and video. Semantic UI provides some most commonly used icon classes for maps which were mostly used to represent something on the map.

Semantic UI Icon set Maps classes:

• ambulance: This class is used to show the ambulance icon.
• anchor: This class is used to show the anchor icon.
• balance scale: This class is used to show the balance scale icon.
• bath: This class is used to show the bath icon.
• bed: This class is used to show the bed icon.
• beer: This class is used to show the beer icon.
• bell: This class is used to show the bell icon.
• bell outline: This class is used to show the bell outline icon.
• bell slash: This class is used to show the bell slash icon.
• bell slash outline: This class is used to show the bell slash outline icon.
• bicycle: This class is used to show the bicycle icon.
• binoculars: This class is used to show the binoculars icon.
• birthday cake: This class is used to show the birthday cake icon.
• blind: This class is used to show the blind icon.
• bomb: This class is used to show the bomb icon.
• book: This class is used to show the book icon.
• bookmark: This class is used to show the bookmark icon.
• bookmark outline: This class is used to show the bookmark outline icon.
• briefcase: This class is used to show the briefcase icon.
• building: This class is used to show the building icon.
• building outline: This class is used to show the building outline icon.
• car: This class is used to show the car icon.
• coffee: This class is used to show the coffee icon.
• crosshairs: This class is used to show the crosshairs icon.
• dollar sign: This class is used to show the dollar sign icon.
• eye: This class is used to show the eye icon.
• eye slash: This class is used to show the eye slash icon.
• eye slash outline: This class is used to show the eye slash outline icon.
• fighter jet: This class is used to show the fighter jet icon.
• fire: This class is used to show the fire icon.
• fire extinguisher: This class is used to show the fire extinguisher icon.
• flag: This class is used to show the flag icon.
• flag outline: This class is used to show the flag outline icon.
• flag checkered: This class is used to show the flag checkered icon.
• flask: This class is used to show the flask icon.
• gamepad: This class is used to show the gamepad icon.
• gavel: This class is used to show the gavel icon.
• gift: This class is used to show the gift icon.
• glass martini: This class is used to show the glass martini icon.
• globe: This class is used to show the globe icon.
• graduation cap: This class is used to show the graduation cap icon.
• h square: This class is used to show the h square icon.
• heart: This class is used to show the heart icon.
• heart outline: This class is used to show the heart outline icon.
• heartbeat: This class is used to show the heartbeat icon.
• home: This class is used to show the home icon.
• hospital: This class is used to show the hospital icon.
• hospital outline: This class is used to show the hospital outline icon.
• image: This class is used to show the image icon.
• image outline: This class is used to show the image outline icon.
• images: This class is used to show the images icon.
• images outline: This class is used to show the images outline icon.
• industry: This class is used to show the industry icon.
• info: This class is used to show the info icon.
• info circle: This class is used to show the info circle icon.
• key: This class is used to show the key icon.
• leaf: This class is used to show the leaf icon.
• lemon: This class is used to show the lemon icon.
• lemon outline: This class is used to show the lemon outline icon.
• life ring: This class is used to show the life ring icon.
• life ring outline: This class is used to show the life ring outline icon.
• lightbulb: This class is used to show the lightbulb icon.
• lightbulb outline: This class is used to show the lightbulb outline icon.
• location arrow: This class is used to show the location arrow icon.
• low vision: This class is used to show the low vision icon.
• magnet: This class is used to show the magnet icon.
• male: This class is used to show the male icon.
• map: This class is used to show the map icon.
• map outline: This class is used to show the map outline icon.
• map marker: This class is used to show the map marker icon.
• map marker alternate: This class is used to show the map marker alternate icon.
• map pin: This class is used to show the map pin icon.
• map signs: This class is used to show the map signs icon.
• medkit: This class is used to show the medkit icon.
• money bill alternate: This class is used to show the money bill alternate icon.
• money bill alternate outline: This class is used to show the money bill alternate outline icon.
• motorcycle: This class is used to show the motorcycle icon.
• music: This class is used to show the music icon.
• newspaper: This class is used to show the newspaper icon.
• newspaper outline: This class is used to show the newspaper outline icon.
• paw: This class is used to show the paw icon.
• phone: This class is used to show the phone icon.
• phone square: This class is used to show the phone square icon.
• phone volume: This class is used to show the phone volume icon.
• plane: This class is used to show the plane icon.
• plug: This class is used to show the plug icon.
• plus: This class is used to show the plus icon.
• plus square: This class is used to show the plus square icon.
• plus square outline: This class is used to show the plus square outline icon.
• print: This class is used to show the print icon.
• recycle: This class is used to show the recycle icon.
• road: This class is used to show the road icon.
• rocket: This class is used to show the rocket icon.
• search: This class is used to show the search icon.
• search minus: This class is used to show the search minus icon.
• search plus: This class is used to show the search plus icon.
• ship: This class is used to show the ship icon.
• shopping bag: This class is used to show the shopping bag icon.
• shopping basket: This class is used to show the shopping basket icon.
• shopping cart: This class is used to show the shopping cart icon.
• shower: This class is used to show the shower icon.
• street view: This class is used to show the street view icon.
• subway: This class is used to show the subway icon.
• suitcase: This class is used to show the suitcase icon.
• tag: This class is used to show the tag icon.
• tags: This class is used to show the tags icon.
• taxi: This class is used to show the taxi icon.
• thumbtack: This class is used to show the thumbtack icon.
• ticket alternate: This class is used to show the ticket alternate icon.
• tint: This class is used to show the tint icon.
• train: This class is used to show the train icon.
• tree: This class is used to show the tree icon.
• trophy: This class is used to show the trophy icon.
• truck: This class is used to show the truck icon.
• tty: This class is used to show the tty icon.
• umbrella: This class is used to show the umbrella icon.
• university: This class is used to show the university icon.
• utensil spoon: This class is used to show the utensil spoon icon.
• utensils: This class is used to show the utensils icon.
• wheelchair: This class is used to show the wheelchair icon.
• wifi: This class is used to show the wifi icon.
• wrench: This class is used to show the wrench icon.

Syntax:

<i class="icon....map_class "></i>

Example 1:  This code demonstrates all Maps icon set classes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Icon Set Maps</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
        </script>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Maps
        </strong>
        <br />
        <br />

        <div class="container">
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big ambulance"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big anchor"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big balance scale"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bath"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bed"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big beer"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bell"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bell outline"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bell slash"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bell slash outline"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bicycle"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big binoculars"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big birthday cake"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big blind"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bomb"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big book  "></i>
                </div>

                <div class="three wide column">
                    <i class="icon big bookmark"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big bookmark outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big briefcase"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big building"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big building outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big car"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big coffee"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big crosshairs "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big dollar sign"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big eye"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big eye slash"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big eye slash outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fighter jet"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fire"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fire extinguisher"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag checkered"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flask"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gamepad"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gavel"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gift"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big glass martini"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big globe"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big graduation cap"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big h square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heart"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heart outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heartbeat"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big home"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hospital "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hospital outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big image"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big image outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big industry "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big info"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big info circle "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big key "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big leaf"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lemon "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lemon outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big life ring"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big life ring outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lightbulb "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lightbulb outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big location arrow "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big low vision "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big magnet "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big male "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map marker "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map marker alternate "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map pin"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map signs "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big medkit "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big money bill alternate "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big money bill alternate outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big motorcycle"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big music "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big newspaper "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big newspaper outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paw"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone volume"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plane"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plug"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus square "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus square outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big print"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big recycle"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big road"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big rocket"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search minus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search plus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big ship"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big shopping bag"></i>
                </div>

                <div class="three wide column">
                    <i class="icon big shopping basket"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big shopping cart"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big shower"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big street view"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big subway"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big suitcase"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tag"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tags"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big taxi"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big thumbtack"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big ticket alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tint"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big train"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tree"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big trophy"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big truck"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tty"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big umbrella"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big university"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big utensil spoon"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big utensils"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wheelchair"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wifi"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wrench"></i>
                </div>
            </div>

        </div>
    </center>
</body>

</html>

Output:

Semantic-UI Icon Set Maps

Example 2: This code demonstrates an example of Maps icon set classes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Icon Set Maps</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Maps
        </strong>
        <br />
        <br />

        <div class="container">
             <div class="ui compact message">
                <i class= "icon large info circle"></i>
                Get more info of the update here
              </div>
              <br>
              <div class="ui compact message">
                <i class= "icon large bell"></i>
                Notifications
              </div>

              </div>

    </center>
</body>

</html>

Output:

Semantic-UI Icon Set Maps

Reference: https://semantic-ui.com/elements/icon.html#maps