Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Horizontal Rule icon
A free horizontal rule 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/horizontal-rule.jsonimport * as React from "react";
/**
* Horizontal Rule from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/horizontal-rule. Sized in em, colored by currentColor.
*/
export function VscHorizontalRuleIcon(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.5 13.5C14.5 13.776 14.276 14 14 14H2C1.724 14 1.5 13.776 1.5 13.5C1.5 13.224 1.724 13 2 13H14C14.276 13 14.5 13.224 14.5 13.5ZM2.5 11C2.776 11 3 10.776 3 10.5V7.5H6V10.5C6 10.776 6.224 11 6.5 11C6.776 11 7 10.776 7 10.5V3.5C7 3.224 6.776 3 6.5 3C6.224 3 6 3.224 6 3.5V6.5H3V3.5C3 3.224 2.776 3 2.5 3C2.224 3 2 3.224 2 3.5V10.5C2 10.776 2.224 11 2.5 11ZM9 10.5V3.5C9 3.224 9.224 3 9.5 3H11.75C12.99 3 14 4.009 14 5.25C14 6.142 13.474 6.907 12.72 7.271C13.326 7.935 13.621 8.88 13.811 9.507C13.869 9.696 13.943 9.944 13.997 10.065C14.148 10.151 14.25 10.313 14.25 10.5C14.25 10.776 14.026 11 13.75 11C13.219 11 13.058 10.469 12.854 9.797C12.487 8.587 12.069 7.5 11 7.5H10V10.5C10 10.776 9.776 11 9.5 11C9.224 11 9 10.776 9 10.5ZM10 6.5H11.75C12.439 6.5 13 5.939 13 5.25C13 4.561 12.439 4 11.75 4H10V6.5Z"
/>
</svg>
);
}import { VscHorizontalRule } from "react-icons/vsc";
export function Example() {
return <VscHorizontalRule 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.5 13.5C14.5 13.776 14.276 14 14 14H2C1.724 14 1.5 13.776 1.5 13.5C1.5 13.224 1.724 13 2 13H14C14.276 13 14.5 13.224 14.5 13.5ZM2.5 11C2.776 11 3 10.776 3 10.5V7.5H6V10.5C6 10.776 6.224 11 6.5 11C6.776 11 7 10.776 7 10.5V3.5C7 3.224 6.776 3 6.5 3C6.224 3 6 3.224 6 3.5V6.5H3V3.5C3 3.224 2.776 3 2.5 3C2.224 3 2 3.224 2 3.5V10.5C2 10.776 2.224 11 2.5 11ZM9 10.5V3.5C9 3.224 9.224 3 9.5 3H11.75C12.99 3 14 4.009 14 5.25C14 6.142 13.474 6.907 12.72 7.271C13.326 7.935 13.621 8.88 13.811 9.507C13.869 9.696 13.943 9.944 13.997 10.065C14.148 10.151 14.25 10.313 14.25 10.5C14.25 10.776 14.026 11 13.75 11C13.219 11 13.058 10.469 12.854 9.797C12.487 8.587 12.069 7.5 11 7.5H10V10.5C10 10.776 9.776 11 9.5 11C9.224 11 9 10.776 9 10.5ZM10 6.5H11.75C12.439 6.5 13 5.939 13 5.25C13 4.561 12.439 4 11.75 4H10V6.5Z"
/>
</svg>"Horizontal Rule" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.