SoiTarot · Icon Style Sample

// 01 · STYLE SPEC

Quy tắc cố định

Mọi icon phải tuân thủ chính xác 4 quy tắc dưới đây. Sự đồng bộ giúp toàn bộ bộ icon trông như cùng một bộ — không lệch tone, không lệch weight.

// GRID

24 × 24px

viewBox cố định. Vùng an toàn padding 2px mỗi cạnh (icon nằm trong 20×20 lõi).

// STROKE

1.5px

Line weight đồng nhất. Cap = round, join = round. Không bao giờ vary trong cùng 1 icon.

// FILL

None

Monoline. Không filled mass, không 3D, không shadow. 1 màu duy nhất / icon.

// CORNERS

Soft

Bo góc nhẹ. Geometric nhưng không cứng. Curve dùng arc/quadratic, không bezier rườm rà.

24×24

SAFE 20×20

// ANATOMY

Lưới 24×24 với padding 2px. Mỗi icon là 1 path / circle / line — không filled, không 3D.

stroke-width: 1.5 cố định
stroke-linecap: round (đầu nét mềm)
stroke-linejoin: round (góc bo)
fill: none (chỉ outline)
currentColor: để CSS điều khiển màu

// 02 · SAMPLE ICONS

4 icon mẫu

Search (universal) · Star (cosmic 4-point sparkle, signature brand) · Heart (geometric, không sến) · Menu (3 lines clean). Mỗi cái hiển thị ở size hero 96px, kích thước thật 16/24/32/48, và 3 variant màu.

icon-search.svg

16PX

20PX

24PX · DEFAULT

32PX

48PX

IVORY · DEFAULT

LAVENDER · MUTED

GOLD · ACTIVE

        // SVG · click to copy
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="10.5" cy="10.5" r="6"/>
  <line x1="14.75" y1="14.75" x2="19" y2="19"/>
</svg>

Star · 4-point sparkle

icon-star.svg

16PX

20PX

24PX · DEFAULT

32PX

48PX

IVORY · DEFAULT

LAVENDER · MUTED

GOLD · ACTIVE

        // SVG · 4-point sparkle (cosmic signature) · click to copy
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2.5 L13 11 L21.5 12 L13 13 L12 21.5 L11 13 L2.5 12 L11 11 Z"/>
</svg>

Heart

icon-heart.svg

16PX

20PX

24PX · DEFAULT

32PX

48PX

IVORY · DEFAULT

LAVENDER · MUTED

GOLD · ACTIVE

        // SVG · click to copy
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 20.5 C12 20.5 4 15.5 4 9.75 C4 7.4 5.9 5.5 8.25 5.5
           C9.9 5.5 11.3 6.5 12 7.9 C12.7 6.5 14.1 5.5 15.75 5.5
           C18.1 5.5 20 7.4 20 9.75 C20 15.5 12 20.5 12 20.5 Z"/>
</svg>

Menu · hamburger

icon-menu.svg

16PX

20PX

24PX · DEFAULT

32PX

48PX

IVORY · DEFAULT

LAVENDER · MUTED

GOLD · ACTIVE

        // SVG · click to copy
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <line x1="4" y1="7" x2="20" y2="7"/>
  <line x1="4" y1="12" x2="20" y2="12"/>
  <line x1="4" y1="17" x2="20" y2="17"/>
</svg>

Style này OK không?

Nếu OK, mình sản xuất toàn bộ ~60+ icon đồng bộ: 21 UI · 7 category · 12 zodiac · 4 suits. Mỗi icon đều tuân thủ chính xác 4 quy tắc spec trên — line weight 1.5, viewBox 24×24, round cap/join, fill none.

👍 OK · sản xuất full set

✎ Có điều chỉnh: "đổi star sang 5-point" / "stroke 2 thay 1.5" / etc.