Semantic-UI Icon Set Sports

Last Updated : 24 Feb, 2022

Semantic UI is a CSS framework that helps in developing beautiful and responsive web interfaces faster. In this article, we will be taking a look at the Sports icons that are included in Semantic UI. There are a total of 11 icons in the Sports icon set that can be used to represent various games and activities.

Semantic-UI Icon Set Sports Classes:

baseball with ball: These classes are used to show the baseball icon.
basketball with ball: These classes are used to show the basketball icon.
bowling with ball: These classes are used to show the bowling ball icon.
football with ball: These classes are used to show the rugby ball icon.
futbol: These classes are used to show the football icon.
futbol with outline: These classes are used to show the outlined football icon.
golf with ball: These classes are used to show the golf ball icon.
hockey with puck: These classes are used to show the hockey puck icon.
quidditch: These classes are used to show the quidditch icon.
table with tennis: These classes are used to show the table tennis icon.
volleyball with ball: These classes are used to show the volleyball icon.

Syntax:

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

Example: The below example shows the use of all 11 sports icons that come with Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic UI - Icon Set Sports</title> 
  <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 Sports</h3> 
    </div> 
  
    <div class="ui grid"> 
      <div class="three wide column"> 
          <i class="icon big baseball ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big basketball ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big bowling ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big football ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big futbol"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big futbol outline"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big golf ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big hockey puck"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big quidditch"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big table tennis"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon big volleyball ball"></i> 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Semantic UI – Icon Set Sports

Example2: The example below shows the variation of icon set sports icons in Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic UI - Icon Set Sports</title> 
  <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 Sports</h3> 
    </div> 
  
    <div class="ui grid"> 
      <div class="three wide column"> 
          <i class="icon red small baseball ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon orange small basketball ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon yellow small bowling ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon olive large football ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon green large futbol"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon teal large futbol outline"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon blue big golf ball"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon violet big hockey puck"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon purple big quidditch"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon pink huge table tennis"></i> 
      </div> 
  
      <div class="three wide column"> 
          <i class="icon brown huge volleyball ball"></i> 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>