Design system

iFlevox Icons are precise, minimal, technical and timeless. Every glyph is built from as few elements as the meaning allows, on a shared grid, with a shared stroke. Nothing is decorative. The goal is recognition without a logo: a designer should eventually see settings, folder and cloud side by side and know they belong to the same system.

The master canvas is 24 × 24 with a 2px safe padding, leaving a 20 × 20 live area. Key shapes align to a 2px sub-grid. Standard keylines: a centred square of 18, a circle of 18 diameter, and 16 × 20 / 20 × 16 rectangles for portrait and landscape forms. Designing every icon on one conceptual grid is what makes the set scale cleanly from 16 to 64px.

The signature is not a mark stamped on every icon — it is a set of recurring rules:

• Consistent corner language. Exterior corners share a 2px radius on the 24 grid — soft, never cartoonish.
• Controlled negative space. Parallel strokes aim for a 2px gap wherever the form allows, so shapes stay open at small sizes.
• One diagonal. Diagonals resolve to 45° wherever the concept allows, giving the set a coherent rhythm.
• Round terminals. Stroke ends and joins are round — a soft, precise, human feel.
• Stroke-centred construction. Paths are drawn on the stroke centreline, so weight changes stay symmetric.

Two of these are the signature, and both are taken from the iFlevox monogram:

• The Cut. Wherever a form can carry one, a single 45° chamfer — the cut that shapes the monogram's stem and arms. Look for it in file, note, save, tag, flag and the brand tile.
• The Dot. One round dot as the single “live” accent — the monogram's i-dot. It is a zero-length round stroke, so its diameter always equals the stroke width. Look for it in info, camera, keyboard and qr-code.

The default stroke is 1.75 on the 24 grid, with stroke-linecap="round" and stroke-linejoin="round". The formal scale is 1.0 · 1.25 · 1.5 · 1.75 · 2.0 · 2.5. Stroke is expressed relative to the 24 viewBox and scales with the icon, so weight stays optically constant at every size.

One deliberate exception: the ellipsis pips in more and more-vertical are solid discs (fill="currentColor") so they stay visible at 16px.

Corner radius is deliberate, not automatic. Enclosures (folder, file, calendar, image) use a 2–2.4px outer radius; interior cut-outs use a slightly tighter radius so counters read cleanly. Sharp corners are reserved for the future iFlevox Sharp family.

Mathematical centring is never enough. iFlevox applies optical corrections such as:

• circles extend fractionally beyond square bounds to look the same size;
• triangles and play shapes are nudged toward their visual centre of mass;
• thin isolated shapes may carry marginally more weight;
• the star and heart sit slightly above centre to balance their mass.

This is the difference between a designed system and an auto-generated SVG dump — every icon page includes a live optical size test ladder to verify it.

The system targets 12 · 16 · 20 · 24 · 32 · 48 · 64. 24 is the master. Small sizes (16–20) get their own optically redrawn family — iFlevox Compact — rather than a naive down-scale, because details that read at 24 can clog at 16.

iFlevox is architected for 8 intentional style families that share one geometry and vocabulary. Only families marked shipped are downloadable today; the rest are being drawn — shown honestly as “soon”.

The 15 icons in the iFlevox Ecosystem category are brand product glyphs (ifx-id, ifx-search, ifx-ai, …). They share one construction, the iFlevox Tile: an 18 × 18 plate whose top-left corner is cut at 45° — the monogram's cut — with the other three corners generously rounded, and a simple glyph of at most 11px inside it. Tiles are designed for 20px and up; at 16px the plate dominates, so use the general-purpose icon there.

Brand icons identify iFlevox products and are excluded from the general-use grant (see Licensing). The general-purpose search, ai and cloud icons are separate, ordinary UI icons. The iFlevox logo itself is not part of this set — it is always used from the official brand files.

Icons are monochrome and inherit currentColor — no gradients. They are verified on white, black, light-grey and dark-grey, and must stay legible in light, dark and high-contrast modes. Duotone uses opacity on a single hue, never a second colour.

Every icon supports both a semantic mode (role="img" + aria-label / <title>) and a decorative mode (aria-hidden="true"). Never rely on an icon alone when meaning could be ambiguous — pair it with text.

Names are lowercase, hyphenated, universal and metaphor-neutral (arrow-right, not next-chevron). Each icon carries synonyms so magnify, find and lookup all resolve to search.

The system exposes CSS custom properties so products theme icons consistently:

--ifx-icon-grid: 24;
--ifx-icon-size: 24px;
--ifx-icon-stroke: 1.75;
--ifx-icon-radius: 2px;
--ifx-icon-gap: 2px;
--ifx-icon-color: currentColor;

The canonical source is one JSON file; everything else is generated from it.

• Static SVG / CDN: /icons/v1/svg/line/<slug>.svg (CDN-ready as cdn.iflevox.uz/icons/v1/…).
• Manifest: /icons/v1/manifest.json — every icon with slug, category, keywords, styles and paths, for search, tooling and AI discovery.
• Whole pack: /icons/v1/iflevox-icons-line.zip — every SVG, the sprite, the manifest and a README in one file. /icons/v1/sprite.svg is an SVG sprite: <svg><use href="/icons/v1/sprite.svg#ifx-search"/></svg> (symbol ids are ifx-<slug>; an external sprite must be served from the same origin as the page).
• Copy on any icon page: SVG, React and HTML snippets, plus a single-icon SVG download.
• Planned package: @iflevox/icons — import { SearchIcon } from "@iflevox/icons". Not yet published; the architecture is prepared honestly and will ship only when the package exists.

There is exactly one source of truth: src/lib/icons/icons.data.json. The website, the static export and any future iFlevox Icons Figma plugin all consume that same file — icons are never manually duplicated across systems, so a fix in one place fixes everywhere.

Every release must pass npm run icons:check. It validates the data file (slug, category, at least six keywords, semver), allows only basic SVG shapes (path, circle, rect, line, …) with no colours of their own, renders every icon and fails if ink touches the canvas edge, warns when it leaves the 2px live area or sits far off-centre, and confirms the static export (/icons/v1/**) is in sync with the data — run npm run icons:build to regenerate it.

iFlevox Icons ship under a purpose-written license, the iFlevox Icon License (IFX-ICL-1.0) — not borrowed from any other library. It is designed around configurable concepts: personal use, commercial use, attribution, redistribution, modification and embedding.

The 15 brand icons (ifx-*) are carved out of the general-use grant: they may only be used to refer to the actual iFlevox products and may not be modified.

Status: working draft. The binding legal text will be finalised with review before public distribution. No legal claims are asserted here beyond that intent.