- 63 CSS Arrows
- Table of Contents
- Animated Arrows
- Author
- Links
- Made with
- About a code
- Smooth Arrow Animation
- Author
- Links
- Made with
- About a code
- The Arrow
- Author
- Links
- Made with
- About a code
- Flipping Arrows
- Author
- Links
- Made with
- About the code
- Awesome Arrow Icon
- Author
- Links
- Made with
- About a code
- Dashed Animated Arrow
- Author
- Links
- Made with
- About the code
- Arrow @keyframes Animation
- Author
- Links
- Made with
- About a code
- Arrow Animation Button
- Author
- Links
- Made with
- About the code
- Double Arrow Button
- Author
- Links
- Made with
- About the code
- Arrow animation
- Author
- Links
- Made with
- About the code
- Arrow Animations
- Author
- Links
- Made with
- About the code
- Arrow Hover Effect
- Author
- Links
- Made with
- About the code
- Animated CSS Arrows
- Arrowed Link
- Triple Arrow Animation
- Author
- Links
- Made with
- About the code
- Animated Arrow
- Author
- Links
- Made with
- About the code
- Arrow animations
- Author
- Links
- Made with
- About the code
- Animated Arrow Icon
- Author
- Links
- Made with
- About the code
- Arrow animation
- Author
- Links
- Made with
- About the code
- 3 Arrows Animation
- Arrow Keyframes Animation
- Arrow Icon Animation
- Author
- Links
- Made with
- About a code
- CSS Only Animated Arrow
- Arrows Back To Top
- Author
- Links
- Made with
- About the code
- Simple CSS Arrow
- HTML And CSS ‘Back To Top’ Arrows
- Author
- Links
- Made with
- About the code
- Up Arrow
- Arrow Boxes
- Author
- Links
- Made with
- UTF-8 Arrows
- Example
- Will display as:
63 CSS Arrows
Collection of free HTML and CSS arrow code examples from Codepen, GitHub and other resources: animated, back to top, scroll down, simple and for boxes. Update of October 2021. 4 new items.
Table of Contents
Animated Arrows
Author
Links
Made with
About a code
Smooth Arrow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
The Arrow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Flipping Arrows
Flipping arrows made with css-doodle.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Awesome Arrow Icon
Animated awesome arrow icon with JS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Dashed Animated Arrow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Arrow @keyframes Animation
Using checkbox as the basis of the arrow state.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Arrow Animation Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Double Arrow Button
Animate an arrow button on click or hover.
Author
Links
Made with
About the code
Arrow animation
HTML and CSS arrow animation.
Author
Links
Made with
About the code
Arrow Animations
Sliding arrow css animations.
Author
Links
Made with
About the code
Arrow Hover Effect
Pure CSS arrow hover effect.
Author
Links
Made with
About the code
Animated CSS Arrows
Arrowed Link
Arrowed link — circle on hover (cf Google Home website).
Made by Alexandre Jolly
May 21, 2017
Triple Arrow Animation
SVG triple arrow animation.
Made by M-A Lavigne
May 5, 2017
Author
Links
Made with
About the code
Animated Arrow
Author
Links
Made with
About the code
Arrow animations
Some CSS only arrow animations that indicate state changes.
Author
Links
Made with
About the code
Animated Arrow Icon
Author
Links
Made with
About the code
Arrow animation
Author
Links
Made with
About the code
3 Arrows Animation
3 arrows animation with HTML, CSS and image.
Arrow Keyframes Animation
Arrow keyframes animation with HTML and CSS.
Made by Stephen Rodriguez
June 21, 2014
Arrow Icon Animation
Arrow icon animation with HTML and CSS.
Made by Bennett Feely
October 9, 2013
Author
Links
Made with
About a code
CSS Only Animated Arrow
Just example of making arrows only with CSS and animate it with CSS3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Arrows Back To Top
3 HTML and CSS arrow back to top code examples.
Author
Links
Made with
About the code
Simple CSS Arrow
Simple pure CSS arrow button.
HTML And CSS ‘Back To Top’ Arrows
Animated ‘back to top’ arrows.
Made by EricPorter
June 13, 2017
Author
Links
Made with
About the code
Up Arrow
Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.
Arrow Boxes
5 HTML and CSS arrow box code examples.
Author
Links
Made with
UTF-8 Arrows
If you want any of these characters displayed in HTML, you can use the HTML entity found in the table below.
If the character does not have an HTML entity, you can use the decimal (dec) or hexadecimal (hex) reference.
Example
I will display ←
I will display ←
I will display ←
Will display as:
Older browsers may not support all the HTML5 entities in the table below.
Chrome and Opera have good support, and IE 11+ and Firefox 35+ support all the entities.
| Char | Dec | Hex | Entity | Name |
|---|---|---|---|---|
| ← | 8592 | 2190 | ← | LEFTWARDS ARROW |
| ↑ | 8593 | 2191 | ↑ | UPWARDS ARROW |
| → | 8594 | 2192 | → | RIGHTWARDS ARROW |
| ↓ | 8595 | 2193 | ↓ | DOWNWARDS ARROW |
| ↔ | 8596 | 2194 | ↔ | LEFT RIGHT ARROW |
| ↕ | 8597 | 2195 | UP DOWN ARROW | |
| ↖ | 8598 | 2196 | NORTH WEST ARROW | |
| ↗ | 8599 | 2197 | NORTH EAST ARROW | |
| ↘ | 8600 | 2198 | SOUTH EAST ARROW | |
| ↙ | 8601 | 2199 | SOUTH WEST ARROW | |
| ↚ | 8602 | 219A | LEFTWARDS ARROW WITH STROKE | |
| ↛ | 8603 | 219B | RIGHTWARDS ARROW WITH STROKE | |
| ↜ | 8604 | 219C | LEFTWARDS WAVE ARROW | |
| ↝ | 8605 | 219D | RIGHTWARDS WAVE ARROW | |
| ↞ | 8606 | 219E | LEFTWARDS TWO HEADED ARROW | |
| ↟ | 8607 | 219F | UPWARDS TWO HEADED ARROW | |
| ↠ | 8608 | 21A0 | RIGHTWARDS TWO HEADED ARROW | |
| ↡ | 8609 | 21A1 | DOWNWARDS TWO HEADED ARROW | |
| ↢ | 8610 | 21A2 | LEFTWARDS ARROW WITH TAIL | |
| ↣ | 8611 | 21A3 | RIGHTWARDS ARROW WITH TAIL | |
| ↤ | 8612 | 21A4 | LEFTWARDS ARROW FROM BAR | |
| ↥ | 8613 | 21A5 | UPWARDS ARROW FROM BAR | |
| ↦ | 8614 | 21A6 | RIGHTWARDS ARROW FROM BAR | |
| ↧ | 8615 | 21A7 | DOWNWARDS ARROW FROM BAR | |
| ↨ | 8616 | 21A8 | UP DOWN ARROW WITH BASE | |
| ↩ | 8617 | 21A9 | LEFTWARDS ARROW WITH HOOK | |
| ↪ | 8618 | 21AA | RIGHTWARDS ARROW WITH HOOK | |
| ↫ | 8619 | 21AB | LEFTWARDS ARROW WITH LOOP | |
| ↬ | 8620 | 21AC | RIGHTWARDS ARROW WITH LOOP | |
| ↭ | 8621 | 21AD | LEFT RIGHT WAVE ARROW | |
| ↮ | 8622 | 21AE | LEFT RIGHT ARROW WITH STROKE | |
| ↯ | 8623 | 21AF | DOWNWARDS ZIGZAG ARROW | |
| ↰ | 8624 | 21B0 | UPWARDS ARROW WITH TIP LEFTWARDS | |
| ↱ | 8625 | 21B1 | UPWARDS ARROW WITH TIP RIGHTWARDS | |
| ↲ | 8626 | 21B2 | DOWNWARDS ARROW WITH TIP LEFTWARDS | |
| ↳ | 8627 | 21B3 | DOWNWARDS ARROW WITH TIP RIGHTWARDS | |
| ↴ | 8628 | 21B4 | RIGHTWARDS ARROW WITH CORNER DOWNWARDS | |
| ↵ | 8629 | 21B5 | ↵ | DOWNWARDS ARROW WITH CORNER LEFTWARDS |
| ↶ | 8630 | 21B6 | ANTICLOCKWISE TOP SEMICIRCLE ARROW | |
| ↷ | 8631 | 21B7 | CLOCKWISE TOP SEMICIRCLE ARROW | |
| ↸ | 8632 | 21B8 | NORTH WEST ARROW TO LONG BAR | |
| ↹ | 8633 | 21B9 | LEFTWARDS ARROW TO BAR OVER RIGHTWARDS ARROW TO BAR | |
| ↺ | 8634 | 21BA | ANTICLOCKWISE OPEN CIRCLE ARROW | |
| ↻ | 8635 | 21BB | CLOCKWISE OPEN CIRCLE ARROW | |
| ↼ | 8636 | 21BC | LEFTWARDS HARPOON WITH BARB UPWARDS | |
| ↽ | 8637 | 21BD | LEFTWARDS HARPOON WITH BARB DOWNWARDS | |
| ↾ | 8638 | 21BE | UPWARDS HARPOON WITH BARB RIGHTWARDS | |
| ↿ | 8639 | 21BF | UPWARDS HARPOON WITH BARB LEFTWARDS | |
| ⇀ | 8640 | 21C0 | RIGHTWARDS HARPOON WITH BARB UPWARDS | |
| ⇁ | 8641 | 21C1 | RIGHTWARDS HARPOON WITH BARB DOWNWARDS | |
| ⇂ | 8642 | 21C2 | DOWNWARDS HARPOON WITH BARB RIGHTWARDS | |
| ⇃ | 8643 | 21C3 | DOWNWARDS HARPOON WITH BARB LEFTWARDS | |
| ⇄ | 8644 | 21C4 | RIGHTWARDS ARROW OVER LEFTWARDS ARROW | |
| ⇅ | 8645 | 21C5 | UPWARDS ARROW LEFTWARDS OF DOWNWARDS ARROW | |
| ⇆ | 8646 | 21C6 | LEFTWARDS ARROW OVER RIGHTWARDS ARROW | |
| ⇇ | 8647 | 21C7 | LEFTWARDS PAIRED ARROWS | |
| ⇈ | 8648 | 21C8 | UPWARDS PAIRED ARROWS | |
| ⇉ | 8649 | 21C9 | RIGHTWARDS PAIRED ARROWS | |
| ⇊ | 8650 | 21CA | DOWNWARDS PAIRED ARROWS | |
| ⇋ | 8651 | 21CB | LEFTWARDS HARPOON OVER RIGHTWARDS HARPOON | |
| ⇌ | 8652 | 21CC | RIGHTWARDS HARPOON OVER LEFTWARDS HARPOON | |
| ⇍ | 8653 | 21CD | LEFTWARDS DOUBLE ARROW WITH STROKE | |
| ⇎ | 8654 | 21CE | LEFT RIGHT DOUBLE ARROW WITH STROKE | |
| ⇏ | 8655 | 21CF | RIGHTWARDS DOUBLE ARROW WITH STROKE | |
| ⇐ | 8656 | 21D0 | ⇐ | LEFTWARDS DOUBLE ARROW |
| ⇑ | 8657 | 21D1 | ⇑ | UPWARDS DOUBLE ARROW |
| ⇒ | 8658 | 21D2 | ⇒ | RIGHTWARDS DOUBLE ARROW |
| ⇓ | 8659 | 21D3 | ⇓ | DOWNWARDS DOUBLE ARROW |
| ⇔ | 8660 | 21D4 | ⇔ | LEFT RIGHT DOUBLE ARROW |
| ⇕ | 8661 | 21D5 | UP DOWN DOUBLE ARROW | |
| ⇖ | 8662 | 21D6 | NORTH WEST DOUBLE ARROW | |
| ⇗ | 8663 | 21D7 | NORTH EAST DOUBLE ARROW | |
| ⇘ | 8664 | 21D8 | SOUTH EAST DOUBLE ARROW | |
| ⇙ | 8665 | 21D9 | SOUTH WEST DOUBLE ARROW | |
| ⇚ | 8666 | 21DA | LEFTWARDS TRIPLE ARROW | |
| ⇛ | 8667 | 21DB | RIGHTWARDS TRIPLE ARROW | |
| ⇜ | 8668 | 21DC | LEFTWARDS SQUIGGLE ARROW | |
| ⇝ | 8669 | 21DD | RIGHTWARDS SQUIGGLE ARROW | |
| ⇞ | 8670 | 21DE | UPWARDS ARROW WITH DOUBLE STROKE | |
| ⇟ | 8671 | 21DF | DOWNWARDS ARROW WITH DOUBLE STROKE | |
| ⇠ | 8672 | 21E0 | LEFTWARDS DASHED ARROW | |
| ⇡ | 8673 | 21E1 | UPWARDS DASHED ARROW | |
| ⇢ | 8674 | 21E2 | RIGHTWARDS DASHED ARROW | |
| ⇣ | 8675 | 21E3 | DOWNWARDS DASHED ARROW | |
| ⇤ | 8676 | 21E4 | LEFTWARDS ARROW TO BAR | |
| ⇥ | 8677 | 21E5 | RIGHTWARDS ARROW TO BAR | |
| ⇦ | 8678 | 21E6 | LEFTWARDS WHITE ARROW | |
| ⇧ | 8679 | 21E7 | UPWARDS WHITE ARROW | |
| ⇨ | 8680 | 21E8 | RIGHTWARDS WHITE ARROW | |
| ⇩ | 8681 | 21E9 | DOWNWARDS WHITE ARROW | |
| ⇪ | 8682 | 21EA | UPWARDS WHITE ARROW FROM BAR | |
| ⇫ | 8683 | 21EB | UPWARDS WHITE ARROW ON PEDESTAL | |
| ⇬ | 8684 | 21EC | UPWARDS WHITE ARROW ON PEDESTAL WITH HORIZONTAL BAR | |
| ⇭ | 8685 | 21ED | UPWARDS WHITE ARROW ON PEDESTAL WITH VERTICAL BAR | |
| ⇮ | 8686 | 21EE | UPWARDS WHITE DOUBLE ARROW | |
| ⇯ | 8687 | 21EF | UPWARDS WHITE DOUBLE ARROW ON PEDESTAL | |
| ⇰ | 8688 | 21F0 | RIGHTWARDS WHITE ARROW FROM WALL | |
| ⇱ | 8689 | 21F1 | NORTH WEST ARROW TO CORNER | |
| ⇲ | 8690 | 21F2 | SOUTH EAST ARROW TO CORNER | |
| ⇳ | 8691 | 21F3 | UP DOWN WHITE ARROW | |
| ⇴ | 8692 | 21F4 | RIGHT ARROW WITH SMALL CIRCLE | |
| ⇵ | 8693 | 21F5 | DOWNWARDS ARROW LEFTWARDS OF UPWARDS ARROW | |
| ⇶ | 8694 | 21F6 | THREE RIGHTWARDS ARROWS | |
| ⇷ | 8695 | 21F7 | LEFTWARDS ARROW WITH VERTICAL STROKE | |
| ⇸ | 8696 | 21F8 | RIGHTWARDS ARROW WITH VERTICAL STROKE | |
| ⇹ | 8697 | 21F9 | LEFT RIGHT ARROW WITH VERTICAL STROKE | |
| ⇺ | 8698 | 21FA | LEFTWARDS ARROW WITH DOUBLE VERTICAL STROKE | |
| ⇻ | 8699 | 21FB | RIGHTWARDS ARROW WITH DOUBLE VERTICAL STROKE | |
| ⇼ | 8700 | 21FC | LEFT RIGHT ARROW WITH DOUBLE VERTICAL STROKE | |
| ⇽ | 8701 | 21FD | LEFTWARDS OPEN-HEADED ARROW | |
| ⇾ | 8702 | 21FE | RIGHTWARDS OPEN-HEADED ARROW | |
| ⇿ | 8703 | 21FF | LEFT RIGHT OPEN-HEADED ARROW |