Hover the icon or press Play. Suggested motion: nudge-right. Pick another to preview it and update the animated code:
External Link icon
A free external link icon from Radix 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
- MIT license
- Project
- icons.radix-ui.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/external-link.jsonimport * as React from "react";
/**
* External Link from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/external-link. Sized in em, colored by currentColor.
*/
export function RxExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M6.5 2C6.77614 2 7 2.22386 7 2.5C7 2.77614 6.77614 3 6.5 3H3V12H12V8.5C12 8.22386 12.2239 8 12.5 8C12.7761 8 13 8.22386 13 8.5V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3C2 2.44772 2.44772 2 3 2H6.5ZM12.5 2C12.5327 2 12.5655 2.00242 12.5977 2.00879L12.6006 2.00977C12.6596 2.02181 12.7142 2.04529 12.7637 2.07617C12.7759 2.08379 12.7872 2.09279 12.7988 2.10156C12.8133 2.11247 12.8276 2.12336 12.8408 2.13574C12.8448 2.13951 12.8496 2.14255 12.8535 2.14648C12.8579 2.15091 12.861 2.15658 12.8652 2.16113C12.8782 2.17509 12.8901 2.18971 12.9014 2.20508C12.9096 2.21632 12.9176 2.22752 12.9248 2.23926C12.9352 2.25615 12.9438 2.27385 12.9521 2.29199C12.9559 2.30024 12.9605 2.30801 12.9639 2.31641C12.9719 2.33664 12.9781 2.35748 12.9834 2.37891C12.9859 2.38905 12.9893 2.39893 12.9912 2.40918C12.9966 2.43867 13 2.46896 13 2.5V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70703L6.85352 8.85352C6.65825 9.04878 6.34175 9.04878 6.14648 8.85352C5.95122 8.65825 5.95122 8.34175 6.14648 8.14648L11.293 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.5Z"
fill="currentColor"
/>
</svg>
);
}import { RxExternalLink } from "react-icons/rx";
export function Example() {
return <RxExternalLink className="size-5" />;
}<svg
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 2C6.77614 2 7 2.22386 7 2.5C7 2.77614 6.77614 3 6.5 3H3V12H12V8.5C12 8.22386 12.2239 8 12.5 8C12.7761 8 13 8.22386 13 8.5V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3C2 2.44772 2.44772 2 3 2H6.5ZM12.5 2C12.5327 2 12.5655 2.00242 12.5977 2.00879L12.6006 2.00977C12.6596 2.02181 12.7142 2.04529 12.7637 2.07617C12.7759 2.08379 12.7872 2.09279 12.7988 2.10156C12.8133 2.11247 12.8276 2.12336 12.8408 2.13574C12.8448 2.13951 12.8496 2.14255 12.8535 2.14648C12.8579 2.15091 12.861 2.15658 12.8652 2.16113C12.8782 2.17509 12.8901 2.18971 12.9014 2.20508C12.9096 2.21632 12.9176 2.22752 12.9248 2.23926C12.9352 2.25615 12.9438 2.27385 12.9521 2.29199C12.9559 2.30024 12.9605 2.30801 12.9639 2.31641C12.9719 2.33664 12.9781 2.35748 12.9834 2.37891C12.9859 2.38905 12.9893 2.39893 12.9912 2.40918C12.9966 2.43867 13 2.46896 13 2.5V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70703L6.85352 8.85352C6.65825 9.04878 6.34175 9.04878 6.14648 8.85352C5.95122 8.65825 5.95122 8.34175 6.14648 8.14648L11.293 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.5Z"
fill="currentColor"
/>
</svg>"External Link" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.