Icons & Sprites

Icons are small visual elements that help with navigation and communication in an interface. There are various ways to display icons on the web: icon fonts such as Font Awesome, SVG icons such as Lucide, CSS-only icons using pseudo-elements, and image sprites using background-position.

Font Awesome is the most popular because it is easy to use — just add a CDN link and a class to an element. Lucide offers a more modern and customizable SVG approach. CSS-only icons save resources but are limited to simple shapes. Image sprites are effective for reducing HTTP requests.

Choosing a method depends on the need: Font Awesome for quick prototyping, SVG for color/size customization, CSS-only for simple icons, and sprites for production performance.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 40px 20px;
    background: #f5f5f5;
    color: #333;
  }

  .demo-section {
    max-width: 800px;
    margin: 0 auto 35px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .demo-section h3 {
    margin-top: 0;
    color: #333;
  }

  /* Font Awesome Icons */
  .fa-icons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
  }

  .fa-icons i {
    font-size: 2em;
    color: #667eea;
    transition: transform 0.2s, color 0.2s;
    cursor: pointer;
  }

  .fa-icons i:hover {
    transform: scale(1.2);
    color: #764ba2;
  }

  .fa-sized i { font-size: 1em; }
  .fa-sized .fa-lg { font-size: 1.5em; }
  .fa-sized .fa-xl { font-size: 2.5em; }

  .fa-styled i {
    padding: 12px;
    background: #f0f0f0;
    border-radius: 10px;
    color: #555;
  }

  .fa-styled i:hover {
    background: #667eea;
    color: white;
  }

  /* Social Icons */
  .social-icons {
    display: flex;
    gap: 12px;
  }

  .social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .social-icon.facebook { background: #1877f2; }
  .social-icon.twitter { background: #1da1f2; }
  .social-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  .social-icon.youtube { background: #ff0000; }
  .social-icon.github { background: #333; }
  .social-icon.linkedin { background: #0077b5; }

  /* Feature Icons */
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
  }

  .feature {
    padding: 20px;
  }

  .feature i {
    font-size: 2.5em;
    color: #667eea;
    margin-bottom: 12px;
    display: block;
  }

  .feature h4 {
    margin: 0 0 8px;
  }

  .feature p {
    font-size: 0.85em;
    color: #888;
    margin: 0;
  }

  /* CSS-only Icons */
  .css-icons {
    display: flex;
    gap: 25px;
    align-items: center;
  }

  .css-hamburger {
    width: 30px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
  }

  .css-hamburger::before,
  .css-hamburger::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 4px;
    background: #333;
    border-radius: 2px;
  }

  .css-hamburger::before { top: -8px; }
  .css-hamburger::after { bottom: -8px; }

  .css-close {
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
  }

  .css-close::before,
  .css-close::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 4px;
    background: #e74c3c;
    border-radius: 2px;
    top: 50%;
    left: 0;
  }

  .css-close::before { transform: rotate(45deg); }
  .css-close::after { transform: rotate(-45deg); }

  .css-search {
    width: 24px;
    height: 24px;
    border: 3px solid #333;
    border-radius: 50%;
    position: relative;
  }

  .css-search::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 3px;
    background: #333;
    bottom: -8px;
    right: -8px;
    transform: rotate(45deg);
    border-radius: 2px;
  }

  .css-arrow-right {
    width: 20px;
    height: 20px;
    border-top: 3px solid #667eea;
    border-right: 3px solid #667eea;
    transform: rotate(45deg);
    cursor: pointer;
  }

  /* Image Sprite Concept */
  .sprite-demo {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .sprite-icon {
    width: 32px;
    height: 32px;
    background: #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #666;
  }

  /* Navigation with Icons */
  .nav-demo {
    display: flex;
    gap: 0;
    background: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 15px 20px;
    color: #aaa;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.8em;
  }

  .nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: white;
  }

  .nav-item.active {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
  }

  .nav-item i {
    font-size: 1.4em;
  }
</style>
</head>
<body>
  <div class="demo-section">
    <h3>Font Awesome - Basic</h3>
    <div class="fa-icons">
      <i class="fas fa-home"></i>
      <i class="fas fa-user"></i>
      <i class="fas fa-envelope"></i>
      <i class="fas fa-heart"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-cog"></i>
      <i class="fas fa-bell"></i>
      <i class="fas fa-camera"></i>
    </div>
  </div>

  <div class="demo-section">
    <h3>Font Awesome - Sizes</h3>
    <div class="fa-icons fa-sized">
      <i class="fas fa-circle"></i>
      <i class="fas fa-circle fa-lg"></i>
      <i class="fas fa-circle fa-xl"></i>
    </div>
  </div>

  <div class="demo-section">
    <h3>Font Awesome - Styled Background</h3>
    <div class="fa-icons fa-styled">
      <i class="fas fa-home"></i>
      <i class="fas fa-search"></i>
      <i class="fas fa-bell"></i>
      <i class="fas fa-heart"></i>
      <i class="fas fa-bookmark"></i>
    </div>
  </div>

  <div class="demo-section">
    <h3>Social Media Icons</h3>
    <div class="social-icons">
      <a href="#" class="social-icon facebook"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="social-icon twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" class="social-icon instagram"><i class="fab fa-instagram"></i></a>
      <a href="#" class="social-icon youtube"><i class="fab fa-youtube"></i></a>
      <a href="#" class="social-icon github"><i class="fab fa-github"></i></a>
      <a href="#" class="social-icon linkedin"><i class="fab fa-linkedin-in"></i></a>
    </div>
  </div>

  <div class="demo-section">
    <h3>Feature Icons</h3>
    <div class="features">
      <div class="feature">
        <i class="fas fa-bolt"></i>
        <h4>Fast</h4>
        <p>High performance for your website</p>
      </div>
      <div class="feature">
        <i class="fas fa-shield-halved"></i>
        <h4>Aman</h4>
        <p>Data security guaranteed</p>
      </div>
      <div class="feature">
        <i class="fas fa-mobile-screen"></i>
        <h4>Responsive</h4>
        <p>Displays optimally on all devices</p>
      </div>
    </div>
  </div>

  <div class="demo-section">
    <h3>CSS-Only Icons (No Library)</h3>
    <div class="css-icons">
      <div class="css-hamburger" title="Menu"></div>
      <div class="css-close" title="Close"></div>
      <div class="css-search" title="Search"></div>
      <div class="css-arrow-right" title="Arrow"></div>
    </div>
  </div>

  <div class="demo-section">
    <h3>Navigation with Icons</h3>
    <div class="nav-demo">
      <a href="#" class="nav-item active">
        <i class="fas fa-home"></i>
        Home
      </a>
      <a href="#" class="nav-item">
        <i class="fas fa-search"></i>
        Search
      </a>
      <a href="#" class="nav-item">
        <i class="fas fa-bell"></i>
        Notifikasi
      </a>
      <a href="#" class="nav-item">
        <i class="fas fa-user"></i>
        Profile
      </a>
    </div>
  </div>
</body>
</html>

Code Explanation

Font Awesome CDN: The CSS link in the <head> loads the icon font. After that, just use an <i> element with a class of fas (solid), far (regular), or fab (brands) followed by the icon name.

Icon sizes: Font Awesome provides the classes fa-lg, fa-xl, fa-2x, fa-3x to change the size. Or set it manually with font-size.

Social icons: Each platform has its own brand icon (fab fa-facebook-f, fab fa-twitter, etc.). Background colors are matched to each platform's brand guidelines.

CSS-only hamburger: Three horizontal lines are created with the main element + ::before + ::after. Absolute positioning allows stacking the three lines.

CSS-only close: Two diagonal lines are created with ::before and ::after rotated 45 degrees.

CSS-only search: The circle uses border-radius: 50% + border, and the handle line uses a rotated ::after.

Navigation: Combines Font Awesome icons with flexbox navigation for a bottom tab bar or sidebar navigation.

Everyday Use Cases

Mobile navigation: A hamburger icon in the top-left corner that turns into an X when the menu opens.

Social footer: A row of social media icons in a website footer.

Feature section: Grid cards with icons explaining product features.

Form inputs: Icons inside input fields (search, envelope, lock) to clarify the purpose of each field.

Conclusion

Icons on the web can be implemented with various methods. Font Awesome is the fastest for prototyping. SVG icons are more flexible for customization. CSS-only icons save resources but are limited. For production, consider SVG sprites or an icon library that only loads a subset (just the icons you use) for performance optimization.