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

Typicons · TiFeather

Feather icon

A free feather icon from Typicons, 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: CC BY-SA 3.0 license
Project: s-ings.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/typicons/feather.json

components/icons/typicons-feather.tsx

import * as React from "react";

/**
 * Feather from Typicons (http://s-ings.com/typicons/), CC BY-SA 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/typicons/feather. Sized in em, colored by currentColor.
 */
export function TiFeatherIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.2"
      baseProfile="tiny"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M11.68 1.017l-.18-.034-.18.033c-4.821.884-8.32 5.084-8.32 9.984 0 4.617 3.108 8.61 7.5 9.795v1.205c0 .553.448 1 1 1s1-.447 1-1v-1.205c4.392-1.185 7.5-5.178 7.5-9.795 0-4.9-3.499-9.1-8.32-9.983zm.82 17.683v-11.7c0-.553-.448-1-1-1s-1 .447-1 1v11.7c-3.18-1.093-5.4-4.054-5.49-7.483l3.137 3.137c.097.097.225.146.353.146s.256-.049.354-.146c.195-.195.195-.512 0-.707l-3.769-3.769c.133-.964.434-1.877.877-2.709l2.184 2.185c.098.097.226.146.354.146s.256-.049.354-.146c.195-.195.195-.512 0-.707l-2.353-2.353c1.162-1.641 2.919-2.846 4.999-3.275 2.08.43 3.837 1.635 4.999 3.275l-2.353 2.353c-.195.195-.195.512 0 .707.098.097.226.146.354.146s.256-.049.354-.146l2.184-2.185c.444.832.744 1.745.877 2.709l-3.769 3.769c-.195.195-.195.512 0 .707.098.098.226.146.354.146s.256-.049.354-.146l3.137-3.137c-.091 3.429-2.311 6.39-5.491 7.483z"
      />
    </svg>
  );
}

With react-icons

import { TiFeather } from "react-icons/ti";

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

feather.svg

<svg
  version="1.2"
  baseProfile="tiny"
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M11.68 1.017l-.18-.034-.18.033c-4.821.884-8.32 5.084-8.32 9.984 0 4.617 3.108 8.61 7.5 9.795v1.205c0 .553.448 1 1 1s1-.447 1-1v-1.205c4.392-1.185 7.5-5.178 7.5-9.795 0-4.9-3.499-9.1-8.32-9.983zm.82 17.683v-11.7c0-.553-.448-1-1-1s-1 .447-1 1v11.7c-3.18-1.093-5.4-4.054-5.49-7.483l3.137 3.137c.097.097.225.146.353.146s.256-.049.354-.146c.195-.195.195-.512 0-.707l-3.769-3.769c.133-.964.434-1.877.877-2.709l2.184 2.185c.098.097.226.146.354.146s.256-.049.354-.146c.195-.195.195-.512 0-.707l-2.353-2.353c1.162-1.641 2.919-2.846 4.999-3.275 2.08.43 3.837 1.635 4.999 3.275l-2.353 2.353c-.195.195-.195.512 0 .707.098.097.226.146.354.146s.256-.049.354-.146l2.184-2.185c.444.832.744 1.745.877 2.709l-3.769 3.769c-.195.195-.195.512 0 .707.098.098.226.146.354.146s.256-.049.354-.146l3.137-3.137c-.091 3.429-2.311 6.39-5.491 7.483z"
  />
</svg>

Attribution

"Feather" icon from Typicons (http://s-ings.com/typicons/), licensed under CC BY-SA 3.0 license.

Feather icon in other sets

Similar Typicons icons