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

Radix Icons · RxFontStyle

Font Style icon

A free font style 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/font-style.json

components/icons/radix-font-style.tsx

import * as React from "react";

/**
 * Font Style from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/font-style. Sized in em, colored by currentColor.
 */
export function RxFontStyleIcon(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="M5.2429 2.68752C6.91676 2.68752 7.97395 3.33531 8.43821 4.31056C8.57073 4.58896 8.5763 4.91325 8.22825 5.19142C7.88005 5.46962 7.52338 5.3477 7.23313 5.0381C6.4721 4.22638 5.99496 4.04982 5.25559 4.04982C4.13963 4.04992 3.54669 4.63617 3.54661 5.27931C3.54661 5.86581 3.9632 6.23149 4.947 6.53419L5.67845 6.76173C7.22975 7.23471 7.97434 7.96011 7.97434 9.17091C7.97412 10.7725 6.69369 12.0907 4.46165 12.0908C2.86634 12.0908 1.39997 11.1128 1.03782 9.98048C0.934859 9.65813 1.11617 9.3775 1.40013 9.24904C1.68407 9.12061 2.0941 9.13425 2.27024 9.45412C2.85336 10.5143 3.64557 10.7285 4.48606 10.7285C5.52662 10.7285 6.29661 10.2613 6.29661 9.45412C6.29655 8.80466 5.9113 8.46419 4.87083 8.14259L4.15891 7.92189C2.6454 7.44892 1.88843 6.69209 1.88841 5.45607C1.88841 3.7976 3.27551 2.68766 5.2429 2.68752ZM12.613 5.04689C13.8546 5.047 14.6624 5.63373 14.9773 6.63478C15.0437 6.846 14.9592 6.97977 14.7478 7.04884C14.5397 7.11667 14.3178 7.09975 14.238 6.8965C13.9357 6.12312 13.3516 5.76271 12.5993 5.76271C11.6466 5.7628 11.0136 6.25168 11.0134 6.91603C11.0134 7.45028 11.3461 7.75077 12.2468 8.04396L12.8347 8.23244C14.0618 8.62985 14.5514 9.13814 14.5515 10.0176C14.5515 11.1968 13.481 12.0438 11.9929 12.044C10.6442 12.044 9.65631 11.2808 9.41966 10.336C9.3653 10.1188 9.41181 10.0287 9.69993 9.96193C9.98836 9.8951 10.0715 9.89907 10.1716 10.1367C10.4556 10.8111 11.1532 11.3272 12.032 11.3272C12.9914 11.3271 13.6833 10.7801 13.6833 10.0635C13.6833 9.53572 13.3958 9.28835 12.4363 8.9756L11.8493 8.78029C10.6614 8.3959 10.1649 7.86125 10.1648 6.9883C10.1648 5.86761 11.1638 5.04689 12.613 5.04689Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

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

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

font-style.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="M5.2429 2.68752C6.91676 2.68752 7.97395 3.33531 8.43821 4.31056C8.57073 4.58896 8.5763 4.91325 8.22825 5.19142C7.88005 5.46962 7.52338 5.3477 7.23313 5.0381C6.4721 4.22638 5.99496 4.04982 5.25559 4.04982C4.13963 4.04992 3.54669 4.63617 3.54661 5.27931C3.54661 5.86581 3.9632 6.23149 4.947 6.53419L5.67845 6.76173C7.22975 7.23471 7.97434 7.96011 7.97434 9.17091C7.97412 10.7725 6.69369 12.0907 4.46165 12.0908C2.86634 12.0908 1.39997 11.1128 1.03782 9.98048C0.934859 9.65813 1.11617 9.3775 1.40013 9.24904C1.68407 9.12061 2.0941 9.13425 2.27024 9.45412C2.85336 10.5143 3.64557 10.7285 4.48606 10.7285C5.52662 10.7285 6.29661 10.2613 6.29661 9.45412C6.29655 8.80466 5.9113 8.46419 4.87083 8.14259L4.15891 7.92189C2.6454 7.44892 1.88843 6.69209 1.88841 5.45607C1.88841 3.7976 3.27551 2.68766 5.2429 2.68752ZM12.613 5.04689C13.8546 5.047 14.6624 5.63373 14.9773 6.63478C15.0437 6.846 14.9592 6.97977 14.7478 7.04884C14.5397 7.11667 14.3178 7.09975 14.238 6.8965C13.9357 6.12312 13.3516 5.76271 12.5993 5.76271C11.6466 5.7628 11.0136 6.25168 11.0134 6.91603C11.0134 7.45028 11.3461 7.75077 12.2468 8.04396L12.8347 8.23244C14.0618 8.62985 14.5514 9.13814 14.5515 10.0176C14.5515 11.1968 13.481 12.0438 11.9929 12.044C10.6442 12.044 9.65631 11.2808 9.41966 10.336C9.3653 10.1188 9.41181 10.0287 9.69993 9.96193C9.98836 9.8951 10.0715 9.89907 10.1716 10.1367C10.4556 10.8111 11.1532 11.3272 12.032 11.3272C12.9914 11.3271 13.6833 10.7801 13.6833 10.0635C13.6833 9.53572 13.3958 9.28835 12.4363 8.9756L11.8493 8.78029C10.6614 8.3959 10.1649 7.86125 10.1648 6.9883C10.1648 5.86761 11.1638 5.04689 12.613 5.04689Z"
    fill="currentColor"
  />
</svg>

Attribution

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

Related icons:

Similar Radix Icons icons