Skip to content

Heroicons

Heroicons provides a designed set of scalable icons for app controls.

Visit Heroicons

Which version of an icon should you start with?

Choose an icon for the job and the size where it appears. Heroicons ships outline and solid variants at documented sizes. For a compact toolbar, use the collection’s small solid variants or inspect the larger option at the actual display size before choosing.

How do you get an icon into your app?

Copy the SVG into your page or use the first-party React or Vue package. The SVG draws the symbol. Your app still needs a real button for an action, or a link for navigation. Keep visible words when the symbol alone is hard to interpret.

What should you preserve after copying an icon?

Heroicons distributes the set under the MIT license. Keep its copyright and permission notice as required by the license. Keep a record of the name and variant, especially if you adjust an icon locally and later compare it with the upstream version.

Can someone tell what each action does without seeing the icons?

Sketch two fictional toolbar buttons, Download and Delete. Keep the exercise on paper.

  1. Use a clear action name
    Circle the text next to each icon. If the control has no visible text, write the name the screen reader should announce.
  2. Check it at its final size
    Draw both controls at the intended size. Check the drawing for a visible focus position and make sure the names are distinct.