Task icons

191 duotone icons for to-do items, one Lit web component each: <c2-task-icon-mail>, <c2-task-icon-meeting>, <c2-task-icon-run>, <c2-task-icon-cook>, and more. They cover the subjects a task list is usually about, in fifteen groups: work, communication, tech, learning, health, sport, home, family, food, shopping, finance, travel, leisure, nature and planning. @c2n/todo-list draws its task icons and its icon picker with them.

The artwork is drawn for this package (MIT, like the rest of the repository) on one 24×24 grid: an outline in currentColor over a soft tint of the same colour, so an icon takes the colour of the text or tile it sits in.

Installation

npm install @c2n/task-icons

Usage

Import only the icons you use:

import '@c2n/task-icons/icons/mail.js'

<c2-task-icon-mail></c2-task-icon-mail>

Or register the whole set:

import '@c2n/task-icons'

An icon is decorative by default (aria-hidden). Give it a label when no nearby text says the same thing:

<c2-task-icon-cart label="Groceries"></c2-task-icon-cart>

Picking an icon for a task

Every icon carries keywords (call: call, phone, ring, dial, contact, mom, dad…). suggestTaskIcon() returns the icon whose keywords best match a piece of text, which is how a to-do list can pick an icon for a list from its title:

import { suggestTaskIcon } from '@c2n/task-icons/suggest-task-icon.js'

suggestTaskIcon('Book the dentist') // 'tooth'
suggestTaskIcon('Team standup') // 'meeting'
suggestTaskIcon('Something unrelated') // undefined

taskIconCatalog (from @c2n/task-icons/task-icon-names.js) lists the name, title, category and keywords of every icon, for your own pickers and search fields; taskIconTag(name) gives the element's tag name.

Styling

| Variable | Default | Description | | ------------------------------- | -------------- | -------------------------------------------------- | | --c2-task-icon--size | 24px | Width and height of the icon. | | --c2-task-icon--color | currentColor | Outline and solid colour. | | --c2-task-icon--stroke-width | 1.75 | Outline width, in units of the 24×24 canvas. | | --c2-task-icon__tone--color | currentColor | Colour of the soft duotone fill. | | --c2-task-icon__tone--opacity | 0.18 | Opacity of the soft fill; 0 draws outlines only. |

Adding an icon

Draw svg/<name>.svg on the 24×24 grid (wrapper exactly <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">), add its title, category and keywords to svg/catalog.json, then run npm run generate -w packages/icons/task-icons. An element without a class is an outline; class="tone" adds the soft fill, fill is the soft fill alone and solid a small solid mark. The generator rejects hard-coded colours, strokes and styles.