Simple Icon List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Icon List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Simple Icon List Component Styles - Copy from here
           ========================================================================== */
        .simple-icon-list-template {
            --sil-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --sil-primary-text-color: #334155;
            --sil-accent-color: #059669; /* Green for checkmarks */
            --sil-bg-color: #ffffff;
            --sil-border-color: #e2e8f0;

font-family: var(--sil-font-family);
            color: var(--sil-primary-text-color);
            width: 100%;
            max-width: 600px;
            background-color: var(--sil-bg-color);
            border: 1px solid var(--sil-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.simple-icon-list-template *,
        .simple-icon-list-template *::before,
        .simple-icon-list-template *::after {
            box-sizing: border-box;
        }

.simple-icon-list-template .list-header {
            margin: 0 0 2rem 0;
            text-align: center;
        }

.simple-icon-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }

.icon-list {
            list-style: none; /* Removes default bullets */
            padding: 0;      /* Removes default browser padding */
            margin: 0;
        }
        
        .icon-list-item {
            display: flex;
            align-items: flex-start; /* Aligns icon with the top of the text */
            gap: 1rem;
            line-height: 1.6;
            font-size: 1rem;
        }
        
        .icon-list-item:not(:last-child) {
            margin-bottom: 1rem;
        }
        
        .icon-list-item .icon {
            width: 24px;
            height: 24px;
            color: var(--sil-accent-color);
            flex-shrink: 0;
            margin-top: .1em; /* Minor vertical adjustment for better alignment */
        }
    </style>
</head>
<body>

<div class="simple-icon-list-template">
    <div class="list-header">
        <h2>Rules of the Lair</h2>
    </div>

<ul class="icon-list">
        <li class="icon-list-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.5-6.25z" clip-rule="evenodd" /></svg>
            <span>The lever marked "Do Not Pull" is for decorative purposes only. Please admire from a safe distance.</span>
        </li>
        <li class="icon-list-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.5-6.25z" clip-rule="evenodd" /></svg>
            <span>Please refrain from asking the giant floating brain in the jar about next week's lottery numbers.</span>
        </li>
        <li class="icon-list-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.5-6.25z" clip-rule="evenodd" /></svg>
            <span>The shark pit is BYOS (Bring Your Own Sardines). Our sharks are on a very specific diet.</span>
        </li>
         <li class="icon-list-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.5-6.25z" clip-rule="evenodd" /></svg>
            <span>Monologuing is scheduled for Tuesdays and Thursdays only. Please book your time slot in advance.</span>
        </li>
    </ul>
</div>

</body>
</html>