Hover the icon or press Play. Suggested motion: nudge-left. Pick another to preview it and update the animated code:
Backbone icon
A free backbone icon from Devicons, 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
- vorillaz.github.io
npx shadcn@latest add https://ui.cuelark.com/r/icons/devicons/backbone.jsonimport * as React from "react";
/**
* Backbone from Devicons (https://vorillaz.github.io/devicons/), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/devicons/backbone. Sized in em, colored by currentColor.
*/
export function DiBackboneIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
version="1.1"
viewBox="0 0 32 32"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M16 9.875l-9.539-5.438v23.698l9.539-5.438 9.539 5.438v-23.698l-9.539 5.438zM11.248 16.286l4.752-2.709 4.752 2.709-4.752 2.709-4.752-2.709zM9.618 9.643l3.399 1.938-3.399 1.938v-3.876zM9.618 19.053l3.145 1.792-3.145 1.793v-3.585zM22.382 22.638l-3.145-1.793 3.145-1.793v3.585zM18.982 11.581l3.399-1.938v3.876l-3.399-1.938z"
/>
</svg>
);
}import { DiBackbone } from "react-icons/di";
export function Example() {
return <DiBackbone className="size-5" />;
}<svg
version="1.1"
viewBox="0 0 32 32"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 9.875l-9.539-5.438v23.698l9.539-5.438 9.539 5.438v-23.698l-9.539 5.438zM11.248 16.286l4.752-2.709 4.752 2.709-4.752 2.709-4.752-2.709zM9.618 9.643l3.399 1.938-3.399 1.938v-3.876zM9.618 19.053l3.145 1.792-3.145 1.793v-3.585zM22.382 22.638l-3.145-1.793 3.145-1.793v3.585zM18.982 11.581l3.399-1.938v3.876l-3.399-1.938z"
/>
</svg>"Backbone" icon from Devicons (https://vorillaz.github.io/devicons/), licensed under MIT license.