# Matita icons

> 260 pencil-style icons for the web, as SVG files and React components. Each icon is a short recipe of simple shapes on a 24 grid that code draws like a pencil would. The same name always draws the same way. MIT licensed. Current version: 0.4.0.

Use only the icon names listed below. Names are lowercase kebab-case and the React component is the PascalCase form (`arrow-right` is `ArrowRight`). If an icon you need is not in the list, it does not exist yet: pick the closest one or ask for it at https://github.com/matita-dev/icons/issues/new?template=icon-request.yml.

## Install and use

- Install: `npm i @matita/icons`
- React: `import { Ruler } from '@matita/icons/react'; <Ruler size={24} />`
- By name: `import { SketchIcon } from '@matita/icons/react'; <SketchIcon name="ruler" />`
- Plain JavaScript: `import { Ruler, toSvg } from '@matita/icons'; toSvg(Ruler, { size: 24 })`
- Props: `size` (px, default 16), `color` (default currentColor), `strokeWidth` (default 1.6 on the 24 grid), `pencil` (loose pencil variant, pair with `@matita/icons/pencil.css`), `title` (accessible label; without it the icon is decorative). `SketchIcon` also takes `seed` and `wobble` (0 = exact shapes, 1 = the full hand, default 1).
- Plain files: `@matita/icons/icons/<name>.svg`, `@matita/icons/pencil/<name>.svg`, `@matita/icons/exact/<name>.svg`, `@matita/icons/sprite.svg`

## Machine-readable

- [Every icon as JSON](https://matita.dev/icons.json): name, component name and the version that added it
- [Changelog](https://matita.dev/changelog/): which icons each release added
- [Roadmap](https://matita.dev/roadmap/): what is being built and what comes next

## Pages

- [All 260 icons](https://matita.dev/icons/): every icon has its own page with code to copy
- [How it works](https://matita.dev/how-it-works/)
- [GitHub](https://github.com/matita-dev/icons) and [npm](https://www.npmjs.com/package/@matita/icons)

## Added in 0.4.0

building, mail-open, calendar-check, timer, alarm-clock, user-check, user-minus, user-circle, shuffle, repeat, keyboard, cpu, hard-drive, bluetooth, leaf, umbrella, briefcase, file-check, file-x, file-code, folder-plus, percent, calculator, trending-down, gauge, plane, car, store, receipt, qr-code, trophy, award, graduation-cap, stethoscope, syringe, pill, test-tube, microscope, thermometer, heart-pulse, medical-cross, bandage, radiation, x-ray, dna, atom, brain, tooth, bone, ambulance, hospital-bed, mars, venus, face-mask, pipette, book-open, target, wrench, hammer, plug

## All 260 icons

check, x, plus, minus, arrow-right, arrow-left, arrow-up, arrow-down, arrow-up-right, chevron-right, chevron-left, chevron-down, chevron-up, search, menu, list, more-horizontal, external-link, copy, clipboard, download, upload, trash, trash-2, rotate-ccw, send, pencil, eye, lock, home, building, file, folder, image, mail, mail-open, calendar, calendar-check, clock, timer, alarm-clock, history, hourglass, user, message-square, filter, map-pin, info, circle-check, circle-alert, triangle-alert, shield-check, more-vertical, grip-vertical, maximize, minimize, refresh-cw, rotate-cw, undo, redo, corner-down-left, log-in, log-out, share, link, paperclip, save, printer, square-pen, zoom-in, zoom-out, circle-x, circle-plus, circle-help, ban, square-check, bell, loader, eye-off, unlock, settings, sliders, toggle-right, heart, star, sparkles, bookmark, tag, key, flag, pin, inbox, archive, cloud, globe, phone, users, user-plus, user-check, user-minus, user-circle, sidebar, columns, layout-grid, square, circle, arrow-down-left, arrow-down-right, arrow-up-left, arrow-up-down, arrow-left-right, chevrons-left, chevrons-right, chevrons-up, chevrons-down, play, pause, skip-forward, skip-back, shuffle, repeat, volume, volume-1, volume-2, volume-x, mic, headphones, music, camera, video, monitor, smartphone, laptop, keyboard, cpu, hard-drive, wifi, bluetooth, battery, power, sun, moon, zap, flame, droplet, leaf, umbrella, bell-off, type, bold, italic, underline, align-left, align-center, align-right, quote, hash, at-sign, code, braces, database, server, bug, git-commit, git-merge, git-pull-request, package, briefcase, file-text, file-plus, file-check, file-x, file-code, folder-open, folder-plus, chart-bar, chart-line, chart-pie, percent, table, calculator, trending-up, trending-down, activity, gauge, map, navigation, shopping-cart, truck, plane, car, credit-card, wallet, store, receipt, qr-code, gift, message-circle, smile, thumbs-up, thumbs-down, lightbulb, rocket, trophy, award, graduation-cap, flask, stethoscope, syringe, pill, test-tube, microscope, thermometer, heart-pulse, medical-cross, bandage, radiation, x-ray, dna, atom, brain, tooth, bone, ambulance, hospital-bed, mars, venus, face-mask, pipette, book, book-open, coffee, crosshair, target, ruler, layers, grid-3x3, frame, scan-line, git-branch, terminal, wrench, hammer, plug, compass, drafting-compass, set-square, eraser, protractor, t-square, pen-nib, brush, palette, scissors, crop, move, mouse-pointer, dimension, angle, bezier