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

Radix Icons · RxTextAlignMiddle

Text Align Middle icon

A free text align middle 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/text-align-middle.json

components/icons/radix-text-align-middle.tsx

import * as React from "react";

/**
 * Text Align Middle from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/text-align-middle. Sized in em, colored by currentColor.
 */
export function RxTextAlignMiddleIcon(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="M3.49991 5.89999C3.60585 5.89989 3.70819 5.85773 3.78311 5.78281L5.78311 3.78281C5.93893 3.62656 5.93919 3.37248 5.78311 3.2164C5.62703 3.06032 5.37294 3.06058 5.2167 3.2164L3.9003 4.53281V0.499603L3.89151 0.418549C3.85394 0.236784 3.69276 0.0993977 3.49991 0.0992126C3.27912 0.0992126 3.09973 0.278869 3.09952 0.499603V4.53281L1.78311 3.2164L1.71963 3.16562C1.56454 3.06335 1.35334 3.08014 1.2167 3.2164C1.08011 3.353 1.06363 3.5641 1.16592 3.71933L1.2167 3.78281L3.2167 5.78281C3.29172 5.85782 3.39382 5.89999 3.49991 5.89999ZM14.4999 4.9996C14.776 4.9996 14.9999 4.77575 14.9999 4.4996C14.9997 4.22364 14.7759 3.9996 14.4999 3.9996H8.49991C8.22394 3.99966 8.00012 4.22367 7.99991 4.4996C7.99991 4.77571 8.22381 4.99955 8.49991 4.9996H14.4999ZM14.4999 7.9996C14.776 7.9996 14.9999 7.77575 14.9999 7.4996C14.9997 7.22364 14.7759 6.9996 14.4999 6.9996H8.49991C8.22394 6.99966 8.00012 7.22367 7.99991 7.4996C7.99991 7.77571 8.22381 7.99955 8.49991 7.9996H14.4999ZM3.49991 14.9C3.69286 14.8998 3.85405 14.7626 3.89151 14.5807L3.9003 14.4996V10.4664L5.2167 11.7828C5.37291 11.939 5.6269 11.939 5.78311 11.7828C5.93893 11.6266 5.93919 11.3725 5.78311 11.2164L3.78311 9.2164C3.70819 9.14148 3.60585 9.09932 3.49991 9.09921C3.394 9.09921 3.29168 9.14163 3.2167 9.2164L1.2167 11.2164L1.16592 11.2799C1.06356 11.4351 1.08008 11.6462 1.2167 11.7828C1.35333 11.9194 1.56439 11.936 1.71963 11.8336L1.78311 11.7828L3.09952 10.4664V14.4996C3.09952 14.7205 3.27899 14.9 3.49991 14.9ZM14.4999 10.9996C14.776 10.9996 14.9999 10.7757 14.9999 10.4996C14.9997 10.2236 14.7759 9.9996 14.4999 9.9996H8.49991C8.22394 9.99966 8.00012 10.2237 7.99991 10.4996C7.99991 10.7757 8.22381 10.9996 8.49991 10.9996H14.4999Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

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

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

text-align-middle.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="M3.49991 5.89999C3.60585 5.89989 3.70819 5.85773 3.78311 5.78281L5.78311 3.78281C5.93893 3.62656 5.93919 3.37248 5.78311 3.2164C5.62703 3.06032 5.37294 3.06058 5.2167 3.2164L3.9003 4.53281V0.499603L3.89151 0.418549C3.85394 0.236784 3.69276 0.0993977 3.49991 0.0992126C3.27912 0.0992126 3.09973 0.278869 3.09952 0.499603V4.53281L1.78311 3.2164L1.71963 3.16562C1.56454 3.06335 1.35334 3.08014 1.2167 3.2164C1.08011 3.353 1.06363 3.5641 1.16592 3.71933L1.2167 3.78281L3.2167 5.78281C3.29172 5.85782 3.39382 5.89999 3.49991 5.89999ZM14.4999 4.9996C14.776 4.9996 14.9999 4.77575 14.9999 4.4996C14.9997 4.22364 14.7759 3.9996 14.4999 3.9996H8.49991C8.22394 3.99966 8.00012 4.22367 7.99991 4.4996C7.99991 4.77571 8.22381 4.99955 8.49991 4.9996H14.4999ZM14.4999 7.9996C14.776 7.9996 14.9999 7.77575 14.9999 7.4996C14.9997 7.22364 14.7759 6.9996 14.4999 6.9996H8.49991C8.22394 6.99966 8.00012 7.22367 7.99991 7.4996C7.99991 7.77571 8.22381 7.99955 8.49991 7.9996H14.4999ZM3.49991 14.9C3.69286 14.8998 3.85405 14.7626 3.89151 14.5807L3.9003 14.4996V10.4664L5.2167 11.7828C5.37291 11.939 5.6269 11.939 5.78311 11.7828C5.93893 11.6266 5.93919 11.3725 5.78311 11.2164L3.78311 9.2164C3.70819 9.14148 3.60585 9.09932 3.49991 9.09921C3.394 9.09921 3.29168 9.14163 3.2167 9.2164L1.2167 11.2164L1.16592 11.2799C1.06356 11.4351 1.08008 11.6462 1.2167 11.7828C1.35333 11.9194 1.56439 11.936 1.71963 11.8336L1.78311 11.7828L3.09952 10.4664V14.4996C3.09952 14.7205 3.27899 14.9 3.49991 14.9ZM14.4999 10.9996C14.776 10.9996 14.9999 10.7757 14.9999 10.4996C14.9997 10.2236 14.7759 9.9996 14.4999 9.9996H8.49991C8.22394 9.99966 8.00012 10.2237 7.99991 10.4996C7.99991 10.7757 8.22381 10.9996 8.49991 10.9996H14.4999Z"
    fill="currentColor"
  />
</svg>

Attribution

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

Related icons:

Similar Radix Icons icons