<table class="compare-table">
  <thead><tr><th>Feature</th><th>IconikAI</th><th>Recraft</th></tr></thead>
  <tbody>
    <tr>
      <td>Primary Purpose</td>
      <td class="winner-cell">App icon generator</td>
      <td>General icon &amp; vector design</td>
    </tr>
    <tr>
      <td>Generation Speed</td>
      <td class="winner-cell">Under 10 seconds</td>
      <td>10–20 seconds</td>
    </tr>
    <tr>
      <td>App Store Size Exports</td>
      <td class="winner-cell"><span class="check">✓</span> All sizes automatic</td>
      <td><span class="cross">✗</span> Manual resizing</td>
    </tr>
    <tr>
      <td>SVG Vector Output</td>
      <td>Available</td>
      <td class="competitor-win"><span class="check">✓</span> Native SVG generation</td>
    </tr>
    <tr>
      <td>Icon Sets (batch)</td>
      <td>4 variants per generation</td>
      <td class="competitor-win">6 icons per generation</td>
    </tr>
    <tr>
      <td>Brand Style Matching</td>
      <td>Style presets + description</td>
      <td class="competitor-win">Upload reference images + HEX codes</td>
    </tr>
    <tr>
      <td>Background Removal</td>
      <td class="winner-cell"><span class="check">✓</span> Built-in</td>
      <td>Limited</td>
    </tr>
    <tr>
      <td>Free Tier</td>
      <td class="winner-cell"><span class="check">✓</span> With commercial license</td>
      <td><span class="check">✓</span> 30 daily credits, public, no commercial</td>
    </tr>
    <tr>
      <td>Commercial License</td>
      <td class="winner-cell"><span class="check">✓</span> All plans</td>
      <td>Paid plans only</td>
    </tr>
    <tr>
      <td>Icon Style Presets</td>
      <td class="winner-cell">20+ app-specific styles</td>
      <td>General style library</td>
    </tr>
    <tr>
      <td>Use Beyond Icons</td>
      <td>App icons focused</td>
      <td class="competitor-win">Illustrations, logos, marketing assets</td>
    </tr>
  </tbody>
</table>

<div class="scores-grid">
  <div class="score-row">
    <div class="label">App Store Readiness</div>
    <div class="score-bars">
      <div class="score-bar iconikai"><span class="tool-name">IconikAI</span><div class="bar-track"><div class="bar-fill" data-width="95">9.5</div></div></div>
      <div class="score-bar competitor"><span class="tool-name">Recraft</span><div class="bar-track"><div class="bar-fill" data-width="65">6.5</div></div></div>
    </div>
  </div>
  <div class="score-row">
    <div class="label">Vector Quality</div>
    <div class="score-bars">
      <div class="score-bar iconikai"><span class="tool-name">IconikAI</span><div class="bar-track"><div class="bar-fill" data-width="78">7.8</div></div></div>
      <div class="score-bar competitor"><span class="tool-name">Recraft</span><div class="bar-track"><div class="bar-fill" data-width="92">9.2</div></div></div>
    </div>
  </div>
  <div class="score-row">
    <div class="label">Speed to Final Asset</div>
    <div class="score-bars">
      <div class="score-bar iconikai"><span class="tool-name">IconikAI</span><div class="bar-track"><div class="bar-fill" data-width="96">9.6</div></div></div>
      <div class="score-bar competitor"><span class="tool-name">Recraft</span><div class="bar-track"><div class="bar-fill" data-width="70">7.0</div></div></div>
    </div>
  </div>
  <div class="score-row">
    <div class="label">Style Consistency</div>
    <div class="score-bars">
      <div class="score-bar iconikai"><span class="tool-name">IconikAI</span><div class="bar-track"><div class="bar-fill" data-width="90">9.0</div></div></div>
      <div class="score-bar competitor"><span class="tool-name">Recraft</span><div class="bar-track"><div class="bar-fill" data-width="85">8.5</div></div></div>
    </div>
  </div>
  <div class="score-row">
    <div class="label">Design Versatility</div>
    <div class="score-bars">
      <div class="score-bar iconikai"><span class="tool-name">IconikAI</span><div class="bar-track"><div class="bar-fill" data-width="72">7.2</div></div></div>
      <div class="score-bar competitor"><span class="tool-name">Recraft</span><div class="bar-track"><div class="bar-fill" data-width="93">9.3</div></div></div>
    </div>
  </div>
</div>

<div class="use-cases">
  <div class="use-card iconikai-card">
    <h3>Choose IconikAI when…</h3>
    <div class="subtitle">You need app icons, fast</div>
    <ul>
      <li><span class="icon">◆</span> You're launching an iOS or Android app and need store-ready icons</li>
      <li><span class="icon">◆</span> You want a complete size pack (all platforms) in one download</li>
      <li><span class="icon">◆</span> You don't want to learn prompt engineering</li>
      <li><span class="icon">◆</span> You need commercial rights from day one</li>
      <li><span class="icon">◆</span> You're an indie dev or startup on a budget</li>
    </ul>
  </div>
  <div class="use-card recraft-card">
    <h3>Choose Recraft when…</h3>
    <div class="subtitle">You need broader design assets</div>
    <ul>
      <li><span class="icon">◆</span> You need scalable SVG vectors for web or print</li>
      <li><span class="icon">◆</span> You're designing a full icon set (navigation, UI icons)</li>
      <li><span class="icon">◆</span> You want to match a specific brand style with reference images</li>
      <li><span class="icon">◆</span> You need illustrations and marketing assets beyond app icons</li>
      <li><span class="icon">◆</span> You're a designer who needs maximum style control</li>
    </ul>
  </div>
</div>

<div class="pricing-compare">
  <div class="pricing-card featured">
    <h3>IconikAI</h3>
    <div class="price">$5</div>
    <div class="price-note">200 credits · Pay as you go</div>
    <ul>
      <li>No subscription</li>
      <li>Credits never expire</li>
      <li>Free tier with commercial license</li>
      <li>All export formats &amp; sizes included</li>
    </ul>
  </div>
  <div class="pricing-card">
    <h3>Recraft</h3>
    <div class="price">Free</div>
    <div class="price-note">30 daily credits · Subscription for more</div>
    <ul>
      <li>Free tier: public images, no commercial license</li>
      <li>Paid plans for commercial use</li>
      <li>SVG exports on all plans</li>
      <li>Brand style features on paid plans</li>
    </ul>
  </div>
</div>

<div class="faq-list">
  <div class="faq-item">
    <button class="faq-q">Is IconikAI better than Recraft for app icons? <span class="arrow">▾</span></button>
    <div class="faq-a">For app-specific icons, IconikAI is the stronger choice. It's built for app icons with automatic platform sizing, App Store-ready exports, and icon-optimized style presets. Recraft is more versatile for general design work including illustrations and vector assets.</div>
  </div>
  <div class="faq-item">
    <button class="faq-q">Does Recraft generate app-ready icon sizes? <span class="arrow">▾</span></button>
    <div class="faq-a">Recraft generates icons but does not automatically export them in App Store or Google Play required sizes. You would need to manually resize outputs to 1024×1024 (iOS), 512×512 (Android), and other platform-specific dimensions. IconikAI handles this automatically.</div>
  </div>
  <div class="faq-item">
    <button class="faq-q">Which tool has better SVG support? <span class="arrow">▾</span></button>
    <div class="faq-a">Recraft has the edge on SVG generation. It produces native vector SVGs directly from text prompts with clean, scalable output. IconikAI offers SVG export but is primarily optimized for raster icon output in PNG and ICO formats at specific app icon sizes.</div>
  </div>
  <div class="faq-item">
    <button class="faq-q">Can I use both tools together? <span class="arrow">▾</span></button>
    <div class="faq-a">Absolutely. A common workflow is to use IconikAI for rapid app icon generation (your App Store and Play Store icons) and Recraft for supplementary design assets like in-app icons, illustrations, and marketing visuals. They complement each other well.</div>
  </div>
</div>