Hover the icon or press Play. Suggested motion: shake. Pick another to preview it and update the animated code:
Keyboard Tab icon
A free keyboard tab icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- CC BY 4.0 license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/keyboard-tab.jsonimport * as React from "react";
/**
* Keyboard Tab from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/keyboard-tab. Sized in em, colored by currentColor.
*/
export function VscKeyboardTabIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M14 12.0011V3.00111C13.9998 2.87616 14.0463 2.75566 14.1305 2.66332C14.2147 2.57099 14.3304 2.51352 14.4548 2.50223C14.5793 2.49094 14.7034 2.52665 14.8028 2.60233C14.9023 2.678 14.9697 2.78816 14.992 2.91111L15 3.00111V12.0011C15.0002 12.1261 14.9537 12.2466 14.8695 12.3389C14.7853 12.4312 14.6696 12.4887 14.5452 12.5C14.4207 12.5113 14.2966 12.4756 14.1972 12.3999C14.0977 12.3242 14.0303 12.2141 14.008 12.0911L14 12.0011ZM2.008 7.59111L2 7.50111C1.99996 7.38408 2.04097 7.27075 2.11589 7.18085C2.19081 7.09095 2.29489 7.03017 2.41 7.00911L2.5 7.00111H11.292L8.611 4.31911C8.52817 4.23637 8.477 4.1272 8.4664 4.01062C8.4558 3.89403 8.48645 3.77742 8.553 3.68111L8.611 3.61211C8.69373 3.52928 8.8029 3.47811 8.91949 3.46751C9.03608 3.45691 9.15269 3.48755 9.249 3.55411L9.318 3.61211L12.854 7.14711C12.9367 7.22996 12.9877 7.3392 12.9981 7.45578C13.0085 7.57236 12.9777 7.68891 12.911 7.78511L12.854 7.85511L9.318 11.3901C9.22981 11.4787 9.11164 11.531 8.98678 11.5368C8.86191 11.5426 8.73941 11.5014 8.64342 11.4213C8.54742 11.3413 8.4849 11.2282 8.46816 11.1043C8.45142 10.9804 8.48169 10.8548 8.553 10.7521L8.611 10.6831L11.292 8.00111H2.5C2.38297 8.00115 2.26964 7.96013 2.17974 7.88522C2.08984 7.8103 2.02906 7.70622 2.008 7.59111Z"
/>
</svg>
);
}import { VscKeyboardTab } from "react-icons/vsc";
export function Example() {
return <VscKeyboardTab className="size-5" />;
}<svg
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 12.0011V3.00111C13.9998 2.87616 14.0463 2.75566 14.1305 2.66332C14.2147 2.57099 14.3304 2.51352 14.4548 2.50223C14.5793 2.49094 14.7034 2.52665 14.8028 2.60233C14.9023 2.678 14.9697 2.78816 14.992 2.91111L15 3.00111V12.0011C15.0002 12.1261 14.9537 12.2466 14.8695 12.3389C14.7853 12.4312 14.6696 12.4887 14.5452 12.5C14.4207 12.5113 14.2966 12.4756 14.1972 12.3999C14.0977 12.3242 14.0303 12.2141 14.008 12.0911L14 12.0011ZM2.008 7.59111L2 7.50111C1.99996 7.38408 2.04097 7.27075 2.11589 7.18085C2.19081 7.09095 2.29489 7.03017 2.41 7.00911L2.5 7.00111H11.292L8.611 4.31911C8.52817 4.23637 8.477 4.1272 8.4664 4.01062C8.4558 3.89403 8.48645 3.77742 8.553 3.68111L8.611 3.61211C8.69373 3.52928 8.8029 3.47811 8.91949 3.46751C9.03608 3.45691 9.15269 3.48755 9.249 3.55411L9.318 3.61211L12.854 7.14711C12.9367 7.22996 12.9877 7.3392 12.9981 7.45578C13.0085 7.57236 12.9777 7.68891 12.911 7.78511L12.854 7.85511L9.318 11.3901C9.22981 11.4787 9.11164 11.531 8.98678 11.5368C8.86191 11.5426 8.73941 11.5014 8.64342 11.4213C8.54742 11.3413 8.4849 11.2282 8.46816 11.1043C8.45142 10.9804 8.48169 10.8548 8.553 10.7521L8.611 10.6831L11.292 8.00111H2.5C2.38297 8.00115 2.26964 7.96013 2.17974 7.88522C2.08984 7.8103 2.02906 7.70622 2.008 7.59111Z"
/>
</svg>"Keyboard Tab" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.