Skip to content
Cuelark UI

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

Radix Icons · RxTextAlignBottom

Text Align Bottom icon

A free text align bottom 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
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/text-align-bottom.json
components/icons/radix-text-align-bottom.tsx
import * as React from "react";

/**
 * Text Align Bottom from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/text-align-bottom. Sized in em, colored by currentColor.
 */
export function RxTextAlignBottomIcon(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.49993 13.9C3.60588 13.8999 3.70821 13.8577 3.78313 13.7828L5.78313 11.7828C5.93895 11.6266 5.93921 11.3725 5.78313 11.2164C5.62705 11.0603 5.37297 11.0606 5.21673 11.2164L3.90032 12.5328V5.4996C3.90011 5.279 3.72053 5.09942 3.49993 5.09921C3.27915 5.09921 3.09975 5.27887 3.09954 5.4996V12.5328L1.78313 11.2164L1.71966 11.1656C1.56456 11.0634 1.35336 11.0801 1.21673 11.2164C1.08013 11.353 1.06365 11.5641 1.16595 11.7193L1.21673 11.7828L3.21673 13.7828C3.29174 13.8578 3.39384 13.9 3.49993 13.9ZM14.4999 6.9996C14.7761 6.9996 14.9999 6.77575 14.9999 6.4996C14.9997 6.22364 14.7759 5.9996 14.4999 5.9996H8.49993C8.22396 5.99966 8.00014 6.22367 7.99993 6.4996C7.99993 6.77571 8.22383 6.99955 8.49993 6.9996H14.4999ZM14.4999 9.9996C14.7761 9.9996 14.9999 9.77575 14.9999 9.4996C14.9997 9.22364 14.7759 8.9996 14.4999 8.9996H8.49993C8.22396 8.99966 8.00014 9.22367 7.99993 9.4996C7.99993 9.77571 8.22383 9.99955 8.49993 9.9996H14.4999ZM14.4999 12.9996C14.7761 12.9996 14.9999 12.7757 14.9999 12.4996C14.9997 12.2236 14.7759 11.9996 14.4999 11.9996H8.49993C8.22396 11.9997 8.00014 12.2237 7.99993 12.4996C7.99993 12.7757 8.22383 12.9996 8.49993 12.9996H14.4999Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxTextAlignBottom } from "react-icons/rx";

export function Example() {
  return <RxTextAlignBottom className="size-5" />;
}
text-align-bottom.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.49993 13.9C3.60588 13.8999 3.70821 13.8577 3.78313 13.7828L5.78313 11.7828C5.93895 11.6266 5.93921 11.3725 5.78313 11.2164C5.62705 11.0603 5.37297 11.0606 5.21673 11.2164L3.90032 12.5328V5.4996C3.90011 5.279 3.72053 5.09942 3.49993 5.09921C3.27915 5.09921 3.09975 5.27887 3.09954 5.4996V12.5328L1.78313 11.2164L1.71966 11.1656C1.56456 11.0634 1.35336 11.0801 1.21673 11.2164C1.08013 11.353 1.06365 11.5641 1.16595 11.7193L1.21673 11.7828L3.21673 13.7828C3.29174 13.8578 3.39384 13.9 3.49993 13.9ZM14.4999 6.9996C14.7761 6.9996 14.9999 6.77575 14.9999 6.4996C14.9997 6.22364 14.7759 5.9996 14.4999 5.9996H8.49993C8.22396 5.99966 8.00014 6.22367 7.99993 6.4996C7.99993 6.77571 8.22383 6.99955 8.49993 6.9996H14.4999ZM14.4999 9.9996C14.7761 9.9996 14.9999 9.77575 14.9999 9.4996C14.9997 9.22364 14.7759 8.9996 14.4999 8.9996H8.49993C8.22396 8.99966 8.00014 9.22367 7.99993 9.4996C7.99993 9.77571 8.22383 9.99955 8.49993 9.9996H14.4999ZM14.4999 12.9996C14.7761 12.9996 14.9999 12.7757 14.9999 12.4996C14.9997 12.2236 14.7759 11.9996 14.4999 11.9996H8.49993C8.22396 11.9997 8.00014 12.2237 7.99993 12.4996C7.99993 12.7757 8.22383 12.9996 8.49993 12.9996H14.4999Z"
    fill="currentColor"
  />
</svg>
Attribution
"Text Align Bottom" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: