Arrow Keys Icon SVG
Arrow Keys
Arrow keys SVG Icon Code | Customize color
You can get svg icon arrow keys in blue, white, red color and transparent color from below list. You can also customize color using color picker.
CustomizeArrow keys
DownloadSvg Code
<?xml version="1.0" encoding="UTF-8"?><svg width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M14 4H34V24H14V4Z" fill="none"/><path d="M4 24H24V44H4V24Z" fill="none"/><path d="M24 24H44V44H24V24Z" fill="none"/><path d="M24 24H4V44H24M24 24V44M24 24H44V44H24M14 4H34V24H14V4Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 10V18" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 14L24 10L28 14" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 34L18 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 38L10 34L14 30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M38 34L30 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M34 30L38 34L34 38" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg> Arrow keys
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: white" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M14 4H34V24H14V4Z" fill="white"></path><path d="M4 24H24V44H4V24Z" fill="white"></path><path d="M24 24H44V44H24V24Z" fill="white"></path><path d="M24 24H4V44H24M24 24V44M24 24H44V44H24M14 4H34V24H14V4Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M24 10V18" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M20 14L24 10L28 14" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M10 34L18 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M14 38L10 34L14 30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M38 34L30 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M34 30L38 34L34 38" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path></svg> Arrow keys
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: red" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M14 4H34V24H14V4Z" fill="red"></path><path d="M4 24H24V44H4V24Z" fill="red"></path><path d="M24 24H44V44H24V24Z" fill="red"></path><path d="M24 24H4V44H24M24 24V44M24 24H44V44H24M14 4H34V24H14V4Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M24 10V18" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M20 14L24 10L28 14" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M10 34L18 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M14 38L10 34L14 30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M38 34L30 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M34 30L38 34L34 38" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path></svg> Arrow keys
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: blue" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M14 4H34V24H14V4Z" fill="blue"></path><path d="M4 24H24V44H4V24Z" fill="blue"></path><path d="M24 24H44V44H24V24Z" fill="blue"></path><path d="M24 24H4V44H24M24 24V44M24 24H44V44H24M14 4H34V24H14V4Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M24 10V18" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M20 14L24 10L28 14" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M10 34L18 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M14 38L10 34L14 30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M38 34L30 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M34 30L38 34L34 38" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path></svg> Arrow keys
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: #f3da35" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M14 4H34V24H14V4Z" fill="#f3da35"></path><path d="M4 24H24V44H4V24Z" fill="#f3da35"></path><path d="M24 24H44V44H24V24Z" fill="#f3da35"></path><path d="M24 24H4V44H24M24 24V44M24 24H44V44H24M14 4H34V24H14V4Z" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M24 10V18" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M20 14L24 10L28 14" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M10 34L18 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M14 38L10 34L14 30" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M38 34L30 34" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M34 30L38 34L34 38" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path></svg> Advance Editor
You can edit arrow keys as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements