SVG icon set
git clone https://git.lucas.co/cce-icons.git
readouts: draw the five bar glyphs as wireframes
cpu, memory, brightness, volume(-muted) and battery follow mail.svg: one
white outline at stroke 4, round caps and joins, the path inset by the
half-stroke so the stroked edge lands where the fill's edge was. Three
of them were solid for a reason that has expired — the readout used to
sit ON the glyph, so the battery and the memory stick needed a body to
carry a number. The number reads out beside the glyph now, and nothing
needs filling in.
Outlining is not just deleting the fill, and three of them needed the
drawing to change:
- cpu: a die the size of the solid one, hollowed, reads as a hash mark
with long pins. The die grows to carry the glyph and the pins become
stubs on it.
- volume: the driver box and the horn were two overlapping fills, and
stroking those puts a seam where they met, so they become one path —
grown, because a box that size has no room left for a hole once its
wall is inked.
- battery-charging: the bolt moves from a masked badge on the corner to
inside the body, which is what an outlined body is for. Filled, so it
reads as a bolt rather than a third outline.
The two wide bodies (battery, memory) take a squircle r=2.5 rather than
the panels' 4.5: on a 16-tall box the larger radius leaves no straight
side and the outline reads as a pill. Pins are stroke 3, not 4, so the
gap between them survives at bar size.
Sized by eye at the size they are actually used — 16 logical px, scale
2 — in a shadow bar, not in the 40-unit viewBox.
Co-Authored-By: Claude Opus 5 <[email protected]>
svg/battery-charging.svg | 27 ++++++++++++--------------
svg/battery.svg | 25 ++++++++++++++++++------
svg/brightness.svg | 27 +++++++++++++++-----------
svg/cpu.svg | 50 +++++++++++++++++++++++++++++++-----------------
svg/memory.svg | 35 ++++++++++++++++++++-------------
svg/volume-muted.svg | 12 +++++-------
svg/volume.svg | 22 +++++++++++++--------
7 files changed, 120 insertions(+), 78 deletions(-)
diff --git a/svg/battery-charging.svg b/svg/battery-charging.svg
index e4649d1..35c6334 100644
--- a/svg/battery-charging.svg
+++ b/svg/battery-charging.svg
@@ -1,18 +1,15 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- battery.svg with a small bolt badged on the body's top-left corner,
- clear of the middle where a readout's number or gauge would go; the
- mask knocks a gap out of the body around it so it reads as a bolt ON
- the battery, not a blob in it. -->
- <defs>
- <mask id="gap">
- <rect width="40" height="40" fill="#ffffff" />
- <path d="M8.1 1.5 L3.6 10.9 L6.8 10.9 L5.4 18.5 L10.4 8.7 L7.2 8.7 Z" fill="#000000"
- stroke="#000000" stroke-width="3" stroke-linejoin="round" />
- </mask>
- </defs>
- <g fill="#ffffff">
- <rect x="3" y="10" width="30" height="20" rx="4" mask="url(#gap)" />
- <rect x="33" y="15" width="4" height="10" rx="1.5" />
- <path d="M8.1 1.5 L3.6 10.9 L6.8 10.9 L5.4 18.5 L10.4 8.7 L7.2 8.7 Z" />
+ <!-- battery.svg with the bolt INSIDE the body. The solid glyph had to
+ badge it on the top-left corner and mask a gap around it, there
+ being no inside to put it in; an outlined body has one, which is
+ where the charging bolt belongs. Filled rather than stroked, so it
+ reads as a bolt and not as a third outline, and sized to nearly
+ fill the wall's inner edge (7..29 x 14..26) — a smaller one read
+ as a spark rather than a bolt at bar size. -->
+ <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path d="M8.75 12 L27.25 12 C29.75 12, 31 13.25, 31 15.75 L31 24.25 C31 26.75, 29.75 28, 27.25 28 L8.75 28 C6.25 28, 5 26.75, 5 24.25 L5 15.75 C5 13.25, 6.25 12, 8.75 12 Z" />
+ <path d="M34.5 17 L34.5 23" />
</g>
+ <path fill="#ffffff" d="M20.5 15 L15.5 21 L20 21 L19.5 25 L24.5 19 L20 19 Z" />
</svg>
diff --git a/svg/battery.svg b/svg/battery.svg
index af20183..b539c83 100644
--- a/svg/battery.svg
+++ b/svg/battery.svg
@@ -1,9 +1,22 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- Stylized battery on its side: body + terminal nub. Solid, with a broad
- body, because the status bar ghosts it under a superimposed readout —
- the number sits where a charge gauge would. -->
- <g fill="#ffffff">
- <rect x="3" y="10" width="30" height="20" rx="4" />
- <rect x="33" y="15" width="4" height="10" rx="1.5" />
+ <!-- Battery on its side, wireframe: body outline plus the terminal nub.
+ Stroke 4, as mail.svg. Body corners are squircle
+ (continuous-curvature) cubics, r=2.5 — the curve spans 1.5r from
+ each corner with control points at 0.5r, as in folder.svg, but at a
+ radius this body can afford: on a 16-tall box the panels' r=4.5
+ leaves almost no straight side and the outline reads as a pill, not
+ a cell. The nub clears the body wall for the same reason — inked
+ 32.5..36.5 against a wall inked to 33, it reads as a terminal on
+ the end rather than a bulge in the corner. The body path
+ is inset 2 (the half-stroke) from the solid glyph's old 3..33 x
+ 10..30 silhouette, so the stroked outer edge lands where the filled
+ one did, and the nub is a single capped stroke whose width IS the
+ old nub: its cap ends inside the body wall, where the two merge.
+ (The body was solid while the readout sat ON it; the number reads
+ out beside the glyph now, so there is nothing to carry.) -->
+ <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path d="M8.75 12 L27.25 12 C29.75 12, 31 13.25, 31 15.75 L31 24.25 C31 26.75, 29.75 28, 27.25 28 L8.75 28 C6.25 28, 5 26.75, 5 24.25 L5 15.75 C5 13.25, 6.25 12, 8.75 12 Z" />
+ <path d="M34.5 17 L34.5 23" />
</g>
</svg>
diff --git a/svg/brightness.svg b/svg/brightness.svg
index 5c37fc2..d1f1ad4 100644
--- a/svg/brightness.svg
+++ b/svg/brightness.svg
@@ -1,14 +1,19 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- Stylized sun: solid disc with eight rounded rays. -->
- <g fill="#ffffff">
- <circle cx="20" cy="20" r="8" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(0 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(45 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(90 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(135 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(180 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(225 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(270 20 20)" />
- <rect x="18" y="3" width="4" height="7" rx="2" transform="rotate(315 20 20)" />
+ <!-- Sun, wireframe: the disc as a ring, the eight rays unchanged. The
+ rays were already strokes in all but name — the solid glyph drew
+ them as 4-wide rounded rects, which is exactly a round-capped
+ stroke of width 4 — so only the disc changes, and it is inset 2
+ (the half-stroke) from the old r=8 fill, leaving the ring's outer
+ edge where the filled disc's edge was. -->
+ <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round">
+ <circle cx="20" cy="20" r="6" />
+ <path d="M20 5 L20 8" />
+ <path d="M20 5 L20 8" transform="rotate(45 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(90 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(135 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(180 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(225 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(270 20 20)" />
+ <path d="M20 5 L20 8" transform="rotate(315 20 20)" />
</g>
</svg>
diff --git a/svg/cpu.svg b/svg/cpu.svg
index 6986fa6..8eaa881 100644
--- a/svg/cpu.svg
+++ b/svg/cpu.svg
@@ -1,21 +1,35 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- Stylized processor: a square die with three pins a side. The die is
- solid so a readout can sit on it. -->
- <g fill="#ffffff">
- <rect x="10" y="10" width="20" height="20" rx="3" />
- <!-- top / bottom pins -->
- <rect x="12" y="4" width="3" height="7" rx="1.5" />
- <rect x="18.5" y="4" width="3" height="7" rx="1.5" />
- <rect x="25" y="4" width="3" height="7" rx="1.5" />
- <rect x="12" y="29" width="3" height="7" rx="1.5" />
- <rect x="18.5" y="29" width="3" height="7" rx="1.5" />
- <rect x="25" y="29" width="3" height="7" rx="1.5" />
- <!-- left / right pins -->
- <rect x="4" y="12" width="7" height="3" rx="1.5" />
- <rect x="4" y="18.5" width="7" height="3" rx="1.5" />
- <rect x="4" y="25" width="7" height="3" rx="1.5" />
- <rect x="29" y="12" width="7" height="3" rx="1.5" />
- <rect x="29" y="18.5" width="7" height="3" rx="1.5" />
- <rect x="29" y="25" width="7" height="3" rx="1.5" />
+ <!-- Processor, wireframe: the die as an outline with three pins a side.
+ Stroke 4 for the die, the outline weight of mail.svg's envelope;
+ the pins are 3, so the 6.5 between their centers stays an open gap
+ at bar size rather than closing into a comb. Die corners are
+ squircle (continuous-curvature) cubics, r=3 — the curve spans 1.5r
+ from each corner with control points at 0.5r, as in folder.svg,
+ at a tighter radius than the panels because a chip is not a card.
+ The die is drawn LARGER than the solid glyph's 10..30 square and
+ the pins shorter: outlined, a small die and long pins read as a
+ hash mark at bar size — the die has to carry the glyph, so it
+ keeps the silhouette and the pins are stubs on it. The pins' inner
+ ends stop on the die's centerline, inside its wall, where the two
+ strokes merge. -->
+ <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke-width="4"
+ d="M15.25 10 L24.75 10 C28.25 10, 30 11.75, 30 15.25 L30 24.75 C30 28.25, 28.25 30, 24.75 30 L15.25 30 C11.75 30, 10 28.25, 10 24.75 L10 15.25 C10 11.75, 11.75 10, 15.25 10 Z" />
+ <g stroke-width="3">
+ <!-- top / bottom pins -->
+ <path d="M14 10 L14 6" />
+ <path d="M20 10 L20 6" />
+ <path d="M26 10 L26 6" />
+ <path d="M14 30 L14 34" />
+ <path d="M20 30 L20 34" />
+ <path d="M26 30 L26 34" />
+ <!-- left / right pins -->
+ <path d="M10 14 L6 14" />
+ <path d="M10 20 L6 20" />
+ <path d="M10 26 L6 26" />
+ <path d="M30 14 L34 14" />
+ <path d="M30 20 L34 20" />
+ <path d="M30 26 L34 26" />
+ </g>
</g>
</svg>
diff --git a/svg/memory.svg b/svg/memory.svg
index b583acc..be25d35 100644
--- a/svg/memory.svg
+++ b/svg/memory.svg
@@ -1,16 +1,25 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- Stylized memory stick: a broad body over a row of edge-connector pins,
- with the key notch splitting the row. Solid, so the status bar can
- ghost it under a superimposed readout. -->
- <g fill="#ffffff">
- <rect x="3" y="9" width="34" height="19" rx="2.5" />
- <!-- pins, notch between the fourth and fifth -->
- <rect x="5" y="28" width="3" height="4" />
- <rect x="9" y="28" width="3" height="4" />
- <rect x="13" y="28" width="3" height="4" />
- <rect x="17" y="28" width="3" height="4" />
- <rect x="23" y="28" width="3" height="4" />
- <rect x="27" y="28" width="3" height="4" />
- <rect x="31" y="28" width="3" height="4" />
+ <!-- Memory stick, wireframe: the body as an outline over the edge
+ connector, the key notch drawn as the gap in the pin row rather
+ than a slot in a filled bar. Stroke 4 for the body, the outline
+ weight of mail.svg; pins at 3, like cpu.svg's. Four pins, not the
+ solid glyph's seven: at bar size seven left a 1px gap between
+ them, which closes into a smear — four keeps the row reading as
+ separate contacts and leaves the notch legible. Body corners are
+ squircle (continuous-curvature) cubics, r=2.5 — battery.svg's
+ radius, the two being the set's two wide bodies, and for the same
+ reason: rounder than that and a short outlined body reads as a
+ pill. The
+ body path is inset 2 (the half-stroke) from the solid glyph's old
+ 3..37 x 9..28 silhouette. -->
+ <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round">
+ <path stroke-width="4"
+ d="M8.75 10 L31.25 10 C33.75 10, 35 11.25, 35 13.75 L35 20.25 C35 22.75, 33.75 24, 31.25 24 L8.75 24 C6.25 24, 5 22.75, 5 20.25 L5 13.75 C5 11.25, 6.25 10, 8.75 10 Z" />
+ <g stroke-width="3">
+ <path d="M10 24 L10 30.5" />
+ <path d="M16 24 L16 30.5" />
+ <path d="M24 24 L24 30.5" />
+ <path d="M30 24 L30 30.5" />
+ </g>
</g>
</svg>
diff --git a/svg/volume-muted.svg b/svg/volume-muted.svg
index e28f689..7754c74 100644
--- a/svg/volume-muted.svg
+++ b/svg/volume-muted.svg
@@ -1,11 +1,9 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<!-- The speaker of volume.svg with the arcs replaced by a cross. -->
- <g fill="#ffffff">
- <rect x="4" y="14" width="7" height="12" rx="1.5" />
- <path d="M10 14 L20 6 L20 34 L10 26 Z" />
- </g>
- <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round">
- <path d="M25 14 L35 26" />
- <path d="M35 14 L25 26" />
+ <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path d="M4 14 L11.5 14 L20 6 L20 34 L11.5 26 L4 26 Z" />
+ <path d="M26 14 L36 26" />
+ <path d="M36 14 L26 26" />
</g>
</svg>
diff --git a/svg/volume.svg b/svg/volume.svg
index 9b29a73..7ed3e02 100644
--- a/svg/volume.svg
+++ b/svg/volume.svg
@@ -1,11 +1,17 @@
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
- <!-- Stylized speaker: driver box + horn, two sound arcs to the right. -->
- <g fill="#ffffff">
- <rect x="4" y="14" width="7" height="12" rx="1.5" />
- <path d="M10 14 L20 6 L20 34 L10 26 Z" />
- </g>
- <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round">
- <path d="M25 13 Q31 20 25 27" />
- <path d="M30 8 Q39.5 20 30 32" />
+ <!-- Speaker, wireframe: driver box and horn as ONE outline — the solid
+ glyph drew them as two overlapping fills, and stroking those would
+ have put a seam down the middle where they met. Stroke 4 with
+ round joins, as mail.svg. The path is inset roughly 2 (the
+ half-stroke) from the old union silhouette, and then grown: a
+ driver box the size of the solid one has no room for a hole once
+ the wall is inked, so the speaker carries more of the box than the
+ fill did and the arcs shift right to keep their gap. They are
+ otherwise unchanged — they were already strokes. -->
+ <g fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path d="M4 14 L11.5 14 L20 6 L20 34 L11.5 26 L4 26 Z" />
+ <path d="M26 13 Q32 20 26 27" />
+ <path d="M31 8 Q40.5 20 31 32" />
</g>
</svg>