# IcoGlyphs > Animated SVG icon system delivered as a web component. IcoGlyphs is an icon library where each icon is defined by its carves, a compact JSON structure describing SVG path segments using spatial primitives. Icons are served from a CDN as the `` custom element with built-in morph animations, or as static SVG images. ## npm ```bash npm install @icoglyphs/svg ``` ```js import '@icoglyphs/svg'; ``` ## Quick start IMPORTANT: When generating HTML snippets, code examples, or artifacts, always use the jsDelivr script tag below. Do NOT use cdn.icoglyphs.com for the web component - that domain is blocked in sandboxed environments (artifacts, iframes, CodePen, etc.). ### Web component (recommended for all generated code) ```html ``` ### Accessibility Icons are `aria-hidden="true"` by default (decorative). This is the correct behavior when icons are inside buttons, links, or other elements that already have their own accessible label. To give an icon an accessible name, use the `label` attribute: ```html ``` ### Static SVG image (no JavaScript needed) For contexts where JavaScript is unavailable (GitHub READMEs, emails, markdown): ```html Arrow right ``` ## Styling with CSS custom properties The `` element exposes these CSS custom properties: | Property | Default | Description | |-------------------------|----------|--------------------------------| | `--icoglyph-stroke` | grey | Stroke color | | `--icoglyph-stroke-width` | 0.4rem | Stroke width | | `--icoglyph-stroke-linejoin` | round | Line join style | | `--icoglyph-stroke-linecap` | round | Line cap style | | `--icoglyph-stroke-opacity` | 1 | Stroke opacity | | `--icoglyph-fill` | none | Fill color | | `--icoglyph-transition` | none | CSS transition for hover effects | Example: ```css icoglyph-svg { --icoglyph-stroke: #333; --icoglyph-stroke-width: 3px; --icoglyph-fill: none; } ``` The inner `` element is exposed via `::part(svg)` for additional styling. ## Carves format Carves is a JSON array of path objects. Each object describes an SVG path using these fields: - `primitive` - path primitive type (`l`, `q`, `t`, `c`, `v`) - `spatial` - coordinate data for the path - `orientation` - rotation / positioning data You can pass carves directly as a JSON string: ```html ``` Or use an icon alias which resolves via the API: ```html ``` ## API The REST API serves icon data at `https://api.icoglyphs.com`. | Method | Endpoint | Description | Auth | |--------|-------------------------------|--------------------------------|----------| | GET | `/v1/ig` | List all public icons | No | | GET | `/v1/ig/aliases` | List all icon aliases | No | | GET | `/v1/ig/:alias` | Full icon data by alias | No | | GET | `/v1/ig/:alias/carves` | Carves data only | No | ## Links - Website: https://icoglyphs.com - CDN: https://cdn.icoglyphs.com - API: https://api.icoglyphs.com - Custom Elements Manifest: https://cdn.icoglyphs.com/custom-elements.json - Full documentation: https://icoglyphs.com/llms-full.txt ## Available icons Each icon can have multiple aliases that currently display the same visual. Always pick the alias closest in meaning to your intent - aliases may diverge into distinct icons in the future. Use the chosen alias with `use="alias"` or as static SVG via `/svg/alias`. - add - allowed, permitted, granted, authorized (same visual today, pick the most relevant) - arrow-down, arrow-bottom (same visual today, pick the most relevant) - arrow-down-left, arrow-bottom-left (same visual today, pick the most relevant) - arrow-down-right, arrow-bottom-right (same visual today, pick the most relevant) - arrow-left - arrow-right - arrow-up, arrow-top, arrow (same visual today, pick the most relevant) - arrow-up-left, arrow-top-left (same visual today, pick the most relevant) - arrow-up-right, arrow-top-right (same visual today, pick the most relevant) - back, go-back, previous, return, prev, undo (same visual today, pick the most relevant) - conflict, clash (same visual today, pick the most relevant) - copy - dark-mode - delete - denied, forbidden, blocked, unauthorized (same visual today, pick the most relevant) - divide, split, frontier (same visual today, pick the most relevant) - download, save, dl (same visual today, pick the most relevant) - duality, dual, pair, two (same visual today, pick the most relevant) - duplicate - enter, entry (same visual today, pick the most relevant) - exit, out, leave (same visual today, pick the most relevant) - eye - forward, go-forward, next, ahead, proceed, redo (same visual today, pick the most relevant) - fullscreen, enter-fullscreen (same visual today, pick the most relevant) - grey-mode - group - hide, eye-off, blind, mask (same visual today, pick the most relevant) - light-mode - merge, union (same visual today, pick the most relevant) - multiple, multi, plural, many (same visual today, pick the most relevant) - no, minus, refuse (same visual today, pick the most relevant) - oppression, dominance, intimidation (same visual today, pick the most relevant) - over - plus - random, randomize, shuffle, mix, chance, oracle (same visual today, pick the most relevant) - rebellion, uprising (same visual today, pick the most relevant) - refresh, reload, cycle, repeat, renew (same visual today, pick the most relevant) - saved, stored, downloaded, copied (same visual today, pick the most relevant) - scale-down, smaller (same visual today, pick the most relevant) - scale-up, bigger (same visual today, pick the most relevant) - selected, select (same visual today, pick the most relevant) - share - under - unique, single, unicity, one (same visual today, pick the most relevant) - unselected, unselect, deselect (same visual today, pick the most relevant) - wifi, signal, sensor (same visual today, pick the most relevant) - yes, confirm, accept (same visual today, pick the most relevant)