Icon

A curated set of Lucide icons, shipped as one SVG sprite and drawn in the current text colour.

Town Meeting is on Monday.

Download the warrant Assessor's database

Show the markup

<p class="cc-paragraph">
  <svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#calendar"/></svg>
  Town Meeting is on Monday.
</p>
<a class="cc-button" href="#">
  <svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#download"/></svg>
  Download the warrant
</a>
<a class="cc-link" href="#">
  Assessor's database
  <svg class="cc-icon cc-icon--sm" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#external-link"/></svg>
</a>

Show the markup

<svg class="cc-icon cc-icon--lg" role="img"><title>Snow emergency in effect</title><use href="/assets/curbcut-icons.svg?v=1ac57b0#snowflake"/></svg>

menu
x
search
chevron-down
chevron-right
chevron-left
arrow-right
arrow-left
external-link
download
upload
home
info
check
circle-alert
triangle-alert
clock
calendar
map-pin
phone
mail
building
landmark
file-text
file-check
newspaper
book-open
scale
gavel
receipt
flag
megaphone
dog
paw-print
car
bus
trash-2
recycle
droplets
zap
snowflake
siren
construction
hammer
trees
leaf
heart
shield
graduation-cap
library
users
user
briefcase

Show the markup

<ul class="cc-list cc-list--unstyled doc-icon-grid" role="list">
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#menu"/></svg><code>menu</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#x"/></svg><code>x</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#search"/></svg><code>search</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#chevron-down"/></svg><code>chevron-down</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#chevron-right"/></svg><code>chevron-right</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#chevron-left"/></svg><code>chevron-left</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#arrow-right"/></svg><code>arrow-right</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#arrow-left"/></svg><code>arrow-left</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#external-link"/></svg><code>external-link</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#download"/></svg><code>download</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#upload"/></svg><code>upload</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#home"/></svg><code>home</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#info"/></svg><code>info</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#check"/></svg><code>check</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#circle-alert"/></svg><code>circle-alert</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#triangle-alert"/></svg><code>triangle-alert</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#clock"/></svg><code>clock</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#calendar"/></svg><code>calendar</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#map-pin"/></svg><code>map-pin</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#phone"/></svg><code>phone</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#mail"/></svg><code>mail</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#building"/></svg><code>building</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#landmark"/></svg><code>landmark</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#file-text"/></svg><code>file-text</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#file-check"/></svg><code>file-check</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#newspaper"/></svg><code>newspaper</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#book-open"/></svg><code>book-open</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#scale"/></svg><code>scale</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#gavel"/></svg><code>gavel</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#receipt"/></svg><code>receipt</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#flag"/></svg><code>flag</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#megaphone"/></svg><code>megaphone</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#dog"/></svg><code>dog</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#paw-print"/></svg><code>paw-print</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#car"/></svg><code>car</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#bus"/></svg><code>bus</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#trash-2"/></svg><code>trash-2</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#recycle"/></svg><code>recycle</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#droplets"/></svg><code>droplets</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#zap"/></svg><code>zap</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#snowflake"/></svg><code>snowflake</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#siren"/></svg><code>siren</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#construction"/></svg><code>construction</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#hammer"/></svg><code>hammer</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#trees"/></svg><code>trees</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#leaf"/></svg><code>leaf</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#heart"/></svg><code>heart</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#shield"/></svg><code>shield</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#graduation-cap"/></svg><code>graduation-cap</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#library"/></svg><code>library</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#users"/></svg><code>users</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#user"/></svg><code>user</code></li>
  <li><svg class="cc-icon cc-icon--lg" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#briefcase"/></svg><code>briefcase</code></li>
</ul>

Accessibility

Decorative by default. An icon beside text that says the same thing gets aria-hidden="true" — otherwise a screen reader announces "calendar" and then "Town Meeting is on Monday", which is worse than the text alone.
Alone, it needs a name. An icon carrying meaning on its own takes role="img" and a <title>. Prefer visible text; a town site has almost no case where a bare icon is the better choice.
Never an icon-only link or button. That is the second most common failure in our audit of 324 town homepages. The label is the text; the icon decorates it.
Stroke is currentColor, so an icon inherits the ink of whatever it sits in — including that component's hover and focus inks — and never needs a contrast entry of its own.

Adding an icon

Add the Lucide name to src/icons/list.txt and run npm run build:icons. Keep the set to what a town site needs: the sprite is one file that every page loads, so every icon costs every page. Lucide is ISC-licensed; the licence ships in the repo.