Skip to content
Raw SVG templates

Wireframe — Mobile App

Low-fi mobile app screen with status bar, hero, feed and tab bar.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 640" width="360" height="640">
  <style>
    text { font:12px Inter, sans-serif; fill:#0f172a; }
    .hd { font-weight:600; font-size:14px; }
    .small { font-size:10px; fill:#64748b; }
    rect.bg { fill:#ffffff; stroke:#94a3b8; }
    rect.tile { fill:#f1f5f9; stroke:#cbd5e1; }
    rect.btn { fill:#dbeafe; stroke:#3666ff; }
  </style>
  <rect class="bg" x="10" y="10" width="340" height="620" rx="22"/>
  <!-- status bar -->
  <text class="small" x="30" y="30">9:41</text>
  <text class="small" x="305" y="30">5G ▮▮▮ ◐</text>
  <!-- header -->
  <text class="hd" x="30" y="60">Discover</text>
  <text x="280" y="60">⌕  ⓘ</text>
  <!-- hero card -->
  <rect class="tile" x="20" y="80" width="320" height="140" rx="10"/>
  <text class="hd" x="36" y="108">Featured</text>
  <text x="36" y="130" class="small">Tap to open featured collection →</text>
  <!-- list rows -->
  <g>
    <rect class="tile" x="20" y="240" width="320" height="64" rx="8"/>
    <text class="hd" x="80" y="270">List item one</text>
    <text x="80" y="288" class="small">supporting text · timestamp</text>
    <rect class="tile" x="20" y="316" width="320" height="64" rx="8"/>
    <text class="hd" x="80" y="346">List item two</text>
    <text x="80" y="364" class="small">supporting text · timestamp</text>
    <rect class="tile" x="20" y="392" width="320" height="64" rx="8"/>
    <text class="hd" x="80" y="422">List item three</text>
    <text x="80" y="440" class="small">supporting text · timestamp</text>
  </g>
  <!-- CTA -->
  <rect class="btn" x="20" y="480" width="320" height="44" rx="10"/>
  <text class="hd" x="160" y="508" text-anchor="middle">Primary action</text>
  <!-- tab bar -->
  <line x1="10" y1="560" x2="350" y2="560" stroke="#cbd5e1"/>
  <text class="hd" x="60"  y="600" text-anchor="middle">Home</text>
  <text x="140" y="600" text-anchor="middle">Search</text>
  <text x="220" y="600" text-anchor="middle">Notifs</text>
  <text x="300" y="600" text-anchor="middle">Profile</text>
</svg>