Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Radix Icons · RxHeading

Heading icon

A free heading 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

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/heading.json

components/icons/radix-heading.tsx

import * as React from "react";

/**
 * Heading from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/heading. Sized in em, colored by currentColor.
 */
export function RxHeadingIcon(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.34534 2.05997C6.55018 2.10209 6.70471 2.28309 6.70471 2.5004C6.70462 2.71765 6.55015 2.89874 6.34534 2.94083L6.25452 2.95059H5.04944V7.0502H9.94983V2.95059H8.75452C8.50605 2.95059 8.30443 2.74884 8.30432 2.5004C8.30432 2.25187 8.50599 2.0502 8.75452 2.0502H12.2545L12.3453 2.05997C12.5502 2.10209 12.7047 2.28309 12.7047 2.5004C12.7046 2.71765 12.5502 2.89874 12.3453 2.94083L12.2545 2.95059H11.0494V12.0502H12.2545L12.3453 12.06C12.5502 12.1021 12.7047 12.2831 12.7047 12.5004C12.7046 12.7176 12.5502 12.8987 12.3453 12.9408L12.2545 12.9506H8.75452C8.50605 12.9506 8.30443 12.7488 8.30432 12.5004C8.30432 12.2519 8.50599 12.0502 8.75452 12.0502H9.94983V7.95059H5.04944V12.0502H6.25452L6.34534 12.06C6.55018 12.1021 6.70471 12.2831 6.70471 12.5004C6.70462 12.7176 6.55015 12.8987 6.34534 12.9408L6.25452 12.9506H2.75452C2.50605 12.9506 2.30443 12.7488 2.30432 12.5004C2.30432 12.2519 2.50599 12.0502 2.75452 12.0502H3.94983V2.95059H2.75452C2.50605 2.95059 2.30443 2.74884 2.30432 2.5004C2.30432 2.25187 2.50599 2.0502 2.75452 2.0502H6.25452L6.34534 2.05997Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxHeading } from "react-icons/rx";

export function Example() {
  return <RxHeading className="size-5" />;
}

heading.svg

<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.34534 2.05997C6.55018 2.10209 6.70471 2.28309 6.70471 2.5004C6.70462 2.71765 6.55015 2.89874 6.34534 2.94083L6.25452 2.95059H5.04944V7.0502H9.94983V2.95059H8.75452C8.50605 2.95059 8.30443 2.74884 8.30432 2.5004C8.30432 2.25187 8.50599 2.0502 8.75452 2.0502H12.2545L12.3453 2.05997C12.5502 2.10209 12.7047 2.28309 12.7047 2.5004C12.7046 2.71765 12.5502 2.89874 12.3453 2.94083L12.2545 2.95059H11.0494V12.0502H12.2545L12.3453 12.06C12.5502 12.1021 12.7047 12.2831 12.7047 12.5004C12.7046 12.7176 12.5502 12.8987 12.3453 12.9408L12.2545 12.9506H8.75452C8.50605 12.9506 8.30443 12.7488 8.30432 12.5004C8.30432 12.2519 8.50599 12.0502 8.75452 12.0502H9.94983V7.95059H5.04944V12.0502H6.25452L6.34534 12.06C6.55018 12.1021 6.70471 12.2831 6.70471 12.5004C6.70462 12.7176 6.55015 12.8987 6.34534 12.9408L6.25452 12.9506H2.75452C2.50605 12.9506 2.30443 12.7488 2.30432 12.5004C2.30432 12.2519 2.50599 12.0502 2.75452 12.0502H3.94983V2.95059H2.75452C2.50605 2.95059 2.30443 2.74884 2.30432 2.5004C2.30432 2.25187 2.50599 2.0502 2.75452 2.0502H6.25452L6.34534 2.05997Z"
    fill="currentColor"
  />
</svg>

Attribution

"Heading" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Heading icon in other sets

Similar Radix Icons icons