---
name: x-gravity-icons
description: Draw new icons that match the X Gravity icon set (24px grid, 1.25px line, small accent X). Use when someone asks for an icon for X Gravity or a client page, like "I need a dump truck".
---

# X Gravity icons

Every icon is a thin-line drawing on a 24 × 24 grid, plus one small accent mark in a second color. The set lives in `kits/icons/svg/` and on the Icons chapter of the brand library. Match it exactly.

## The grid
- `viewBox="0 0 24 24"`, drawn at 24px. Shown at 24, 28, 36 or 56px.
- Keep the drawing between 3.5 and 20.5 on both axes (a 3.5 safe margin).
- Line: `stroke-width="1.25"`, `stroke-linecap="square"`, `stroke-linejoin="miter"`, `fill="none"`.
- Straight lines, right angles and simple arcs. Snap points to whole or half units.
- No fills, no shadows, no gradients, no rounded caps.

## The accent
- Every icon gets **one** small accent: an X (two crossing strokes) in the accent color, with class `ix`.
- Size: arms of 1.1 to 2.4 units from the center. `M{cx-s} {cy-s}L{cx+s} {cy+s}M{cx+s} {cy-s}L{cx-s} {cy+s}`
- Put it where the meaning is: inside a screen, on a document, in the bed of a truck. If there's no natural spot, put it top right, clear of the drawing.
- **Exception: anything about AI uses a small diamond instead of an X** (the same sign as in the illustrations): `M{cx} {cy-s}L{cx+s} {cy}L{cx} {cy+s}L{cx-s} {cy}Z`.

## Colors
The base line and the accent are set separately.
| Use | Line | Accent |
|---|---|---|
| Default, on paper | Ink #14131f | Violet #4b3fd1 |
| Brand pages | Ink #14131f | Coral #ff6f59 |
| Build pages | Ink #14131f | Teal #14b8a6 |
| On dark | White #ffffff | Violet 300 #9d92ff, Coral or Teal |
| One color | Same color for both | |

In code, draw the line in `currentColor` and give `.ix` its own stroke so CSS can recolor both:
```html
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <g fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="square" stroke-linejoin="miter">
    …drawing…
    <path class="ix" d="…"/>
  </g>
</svg>
```
```css
.icon { width: 36px; height: 36px; color: var(--ink); }
.icon .ix { stroke: var(--vio); }
```

## Making a new icon
1. Name it in kebab case, by the object: `dump-truck`, not `logistics`.
2. Sketch it from 2 to 6 simple shapes. Leave out detail a 24px icon can't hold (no bolts, no tire treads).
3. Check it at 24px next to three icons from the set. Same weight, same amount of detail, same margins.
4. Add the accent.
5. Save as `kits/icons/svg/<name>.svg` with the default colors (line #14131f, accent #4b3fd1), add it to the `ICONS` list in the brand library page, and rebuild the zips.

## Example: "I need a dump truck"
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.25" stroke-linecap="square" stroke-linejoin="miter">
  <path stroke="#14131f" d="M3.5 15H20.5"/>
  <path stroke="#14131f" d="M14.5 15V9H18L20.5 12V15"/>
  <path stroke="#14131f" d="M3.5 13L4.5 6.5L13.5 8.5L13 13Z"/>
  <circle stroke="#14131f" cx="7" cy="17.3" r="1.7"/>
  <circle stroke="#14131f" cx="17" cy="17.3" r="1.7"/>
  <path stroke="#4b3fd1" class="ix" d="M7.4 8.9L10 11.5M10 8.9L7.4 11.5"/>
</svg>
```
Chassis line, cab, tipped bed, two wheels; the accent sits in the load.