Accordion icons with HTML and CSS

Use a plus icon for a collapsed section and a minus icon for an expanded section. Native <details> and <summary> handle the toggle, keyboard interaction, and open state without JavaScript.

Try a plus/minus accordion

Does this accordion need JavaScript?

No. The browser opens and closes the details element. CSS selects the matching SVG using the open attribute.

Copy this complete example into an HTML file. Replace the title and content with your own text.

<details class="accordion">
  <summary>
    Accordion title
    <span class="accordion-icon" aria-hidden="true">
      <svg class="icon-closed" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
      <svg class="icon-open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /></svg>
    </span>
  </summary>
  <p>Accordion content goes here.</p>
</details>

<style>
  .accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; cursor: pointer; list-style: none; }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion-icon { display: inline-flex; flex-shrink: 0; }
  .accordion-icon svg { width: 1.25em; height: 1.25em; }
  .accordion[open] .icon-closed,
  .accordion:not([open]) .icon-open { display: none; }
</style>

Want another style? Customize plus/minus icons or choose a chevron pair, then use the card’s code button to copy both states and the CSS.

Choose the right open and closed icons

Plus / minus: a compact choice for FAQ sections and expandable content. Plus suggests more content; minus marks an expanded section.
Down / up chevrons: useful for vertical accordions where the icon communicates the direction of expansion.
Right / down disclosure icons: useful for nested navigation and tree-style lists.

Keep icon placement consistent and include a descriptive text label. An icon should support the label, not replace it.

Color, sizing, and accessibility

Use currentColor for inline SVGs to inherit the surrounding text color. A downloaded SVG used through <img> does not inherit the page’s text color; use a fixed color there.
Size icons in em units so they scale with the summary text. Stroke width changes outlined icons, not the filled caret shapes.
Keep the icon wrapper aria-hidden="true". The native summary already exposes the disclosure state to assistive technology.
Do not add a static aria-expanded value to this native example. For a custom button-based accordion, update that attribute on every toggle and associate the button with its panel.
Keep a visible keyboard focus indicator. Test Tab, Enter, and Space, and check the result at narrow widths.

Frequently asked questions

How do I change the icon when an accordion opens?

Include both SVGs inside the summary. Hide the closed icon with .accordion[open] .icon-closed and hide the open icon with .accordion:not([open]) .icon-open. The example includes both rules.

Can I use these icons commercially?

The outlined icons come from Lucide under the ISC license; retain the required license notice when distributing them. Filled carets are original to Accordion Icons and free to use.

Can I use an SVG data URI in CSS?

Yes. The data URI action exports an encoded SVG for a CSS background image. Choose a fixed color for that approach: currentColor inside an SVG background image does not inherit the host element’s color.

Customize and copy accordion icons