Section

Icon Features

Compact icon + text feature list in a 4-col grid.

Section
Vanilla
HTML
MIT

Preview

Live section

Preview not available

No interactive preview for this section.

Install it with the CLI below, or read the implementation on this page.

No dependencies Responsive · Light/dark · Focus-visible

Install

Add to your project

terminal

npx devsnips add Vanilla/Sections/Features/feature-icons

registry path: Vanilla/Sections/Features/feature-icons

Source

Implementation

code.html

<!-- Snippet Name: Icon Features | Family: Features | Description: Compact icon + text feature list in a 4-col grid. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Features | DevSnips</title>
  <meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: feature-icons. Copy, customize, ship.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>  /* ---- Neo-Brutalist design tokens ---- */
  :root{
    --bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
    --border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
    --accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
    --radius:6px; --radius-lg:10px;
    --shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
    --ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
    --container:1200px; --gutter:20px;
    --fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
    --fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
    --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
      --border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
  }
  /* ---- base layout + components ---- */
  *{box-sizing:border-box}
  .nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
    line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
  .nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
  .nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
  .nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
  .nb p{margin:0} .nb a{color:inherit}
  .nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    border:2px solid var(--border);background:var(--surface);padding:6px 12px;
    border-radius:999px;box-shadow:var(--shadow)}
  .nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
  .nb .muted{color:var(--muted)}
  .nb .center{text-align:center;margin-inline:auto}
  .nb .grid{display:grid;gap:var(--gutter)}
  .nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
    text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
    padding:14px 22px;background:var(--primary);color:var(--primary-fg);
    box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
  .nb .btn.outline{background:var(--surface);color:var(--foreground)}
  .nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
  .nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
  .nb .btn.accent{background:var(--accent);color:#0a0a0a}
  .nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
  .nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
  .nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
    padding:4px 10px;border-radius:999px;background:var(--surface)}
  .nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
  .nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
    padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
  .nb .skip:focus{left:8px}
  .nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  @media (prefers-reduced-motion:reduce){
    .nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
      transition-duration:.001ms!important;animation-iteration-count:1!important}
  }

  .fi .head{text-align:center;margin-bottom:42px}.fi .head h2{margin:14px 0 10px}
  .fi .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .fi .row{display:flex;align-items:flex-start;gap:14px;padding:16px;border:2px solid var(--border);border-radius:10px;background:var(--surface)}
  .fi .ic{width:44px;height:44px;flex:none;border:3px solid var(--border);border-radius:10px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--shadow)}
  .fi .row h3{font-size:1.02rem;margin-bottom:2px}.fi .row p{font-size:.9rem;color:var(--muted)}
  @media(min-width:760px){.fi .grid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:1100px){.fi .grid{grid-template-columns:repeat(4,1fr)}}</style>
</head>
<body class="nb">
  <a class="skip" href="#main">Skip to content</a>

  <section class="fi" aria-labelledby="fi-title">
    <div class="container">
      <div class="head"><span class="eyebrow">Icon features</span><h2 id="fi-title">Small details, big difference.</h2></div>
      <div class="grid">
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/></svg></span><div><h3>Fast</h3><p>Instant loads.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='4' y='11' width='16' height='9' rx='2'/><path d='M8 11V7a4 4 0 018 0v4'/></svg></span><div><h3>Secure</h3><p>Encrypted at rest.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/></svg></span><div><h3>Global</h3><p>12 regions.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M16 18l6-6-6-6M8 6l-6 6 6 6'/></svg></span><div><h3>Open</h3><p>Typed SDKs.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg></span><div><h3>Insight</h3><p>Live metrics.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg></span><div><h3>SLA</h3><p>99.99%.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-6 8-6s8 2 8 6'/></svg></span><div><h3>Teams</h3><p>RBAC built-in.</p></div></div>
        <div class="row"><span class="ic"><svg class="is" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg></span><div><h3>Alerts</h3><p>Smart digests.</p></div></div>
      </div>
    </div>
  </section>
</body>
</html>

# Icon Features

Compact icon + text feature list in a 4-col grid.

**Technology:** Vanilla HTML/CSS/JS  
**Category:** sections / features  
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)  
**Responsive:** Mobile-first (320px → 1920px)  
**Dark mode:** via `prefers-color-scheme`  

**Tags:** features, icons, compact  
**Features:** light/dark, responsive

## Usage

1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand.

101 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This section is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://sections/features/feature-icons

Continue browsing

View all

Live section

Add to your project

Implementation

Available to your agent.

Related sections