JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Awesome Icon List</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .icon-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .icon-item {
      width: 100px;
      text-align: center;
    }
    .icon-item i {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Font Awesome Icon List</h1>
  <div class="icon-list" id="iconList"></div>

  <script>
    // List of Font Awesome icons to display (you can add more icons to this list)
    const icons = [
  'coffee', 'user', 'bell', 'heart', 'star', 'check-circle', 'facebook', 'twitter', 'github',
  'car', 'apple', 'android', 'camera', 'search', 'home', 'shopping-cart', 'envelope', 'calendar',
  'ship', 'robot', 'moon', 'sun', 'star-half', 'phone', 'gift', 'map-marker-alt', 'plus', 'minus',
  'smile', 'frown', 'meh', 'clock', 'paper-plane', 'address-book', 'address-card', 'times-circle',
  'star-and-crescent', 'reddit', 'snapchat', 'tiktok', 'spotify', 'google', 'amazon', 'linkedin',
  'instagram', 'youtube', 'paypal', 'russia', 'flag', 'camera-retro', 'user-secret', 'bookmark', 'cloud',
  'bolt', 'coffee', 'cog', 'user-friends', 'bell-slash', 'calendar-alt', 'chart-line', 'chart-bar',
  'clipboard', 'cloud-upload-alt', 'file-alt', 'file-word', 'folder', 'hourglass-half', 'key', 'lock', 'map',
  'pen', 'plane', 'shuttle-van', 'star-of-david', 'user-tie', 'user-ninja', 'wallet', 'wind', 'dizzy',
  'file', 'file-export', 'file-import', 'folder-open', 'id-badge', 'keyboard', 'lightbulb', 'mouse', 'pencil-alt', 'printer',
  'recycle', 'route', 'snowflake', 'socks', 'thermometer', 'tree', 'truck', 'university', 'video',
  'wifi', 'wine-glass', 'magnet', 'medal', 'location-arrow',...