CSS Arrows – 8 Free CSS, Bootstrap & Tailwind Sets
CSS Arrows is a pack of eight sets of arrows, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .accordion, .dropdown, .form-select, .icon-link-hover, .card, .btn and .list-group where they fit, and Tailwind CSS 4. The sets cover pure CSS arrow shapes in every direction, animated scroll-down indicators, arrow buttons and read more links, chevrons that rotate with an accordion or dropdown, process flow arrows, hand-drawn SVG arrows that draw themselves, a dark set and a modern CSS set built on clip-path: shape(), @property and scroll-driven animation. Only the accordion and dropdown in set 04 use a few lines of JavaScript.
A good arrow is decoration that points at something with a name. The arrow itself should be hidden from screen readers, and the link or button it belongs to should be named by its text or an aria-label, so nobody hears right-pointing triangle. Chevrons on accordions and dropdowns should rotate from the same aria-expanded or open state that assistive technology announces, never from a separate class that can drift. Arrows that move on hover should move on keyboard focus too, animated scroll cues should stop after a few seconds and stay still for people who ask for reduced motion, and an arrow that means up or down in a chart needs the direction in words as well as in colour.
