Animal Paw Print icon

Use the Animal Paw Print icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { AnimalPawPrint24Regular, AnimalPawPrint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AnimalPawPrint24Regular aria-label="Animal Paw Print" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_animal_paw_print_24_regular.svg" width="24" height="24" alt="Animal Paw Print">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.75 5.25C7.75 4.46244 8.28866 4 8.75 4C9.21134 4 9.75 4.46244 9.75 5.25C9.75 6.03756 9.21134 6.5 8.75 6.5C8.28866 6.5 7.75 6.03756 7.75 5.25ZM8.75 2.5C7.27835 2.5 6.25 3.82842 6.25 5.25C6.25 6.67158 7.27835 8 8.75 8C10.2217 8 11.25 6.67158 11.25 5.25C11.25 3.82842 10.2217 2.5 8.75 2.5ZM3.5 7.5C3.03866 7.5 2.5 7.96244 2.5 8.75C2.5 9.53756 3.03866 10 3.5 10C3.96134 10 4.5 9.53756 4.5 8.75C4.5 7.96244 3.96134 7.5 3.5 7.5ZM1 8.75C1 7.32842 2.02835 6 3.5 6C4.97165 6 6 7.32842 6 8.75C6 10.1716 4.97165 11.5 3.5 11.5C2.02835 11.5 1 10.1716 1 8.75ZM12 11.5C8.96243 11.5 6.5 13.9624 6.5 17C6.5 17.7619 6.88204 18.3601 7.53553 18.7979C8.20638 19.2474 9.13609 19.5 10.0782 19.5H13.9218C14.8639 19.5 15.7936 19.2474 16.4645 18.7979C17.118 18.3601 17.5 17.7619 17.5 17C17.5 13.9624 15.0376 11.5 12 11.5ZM5 17C5 13.134 8.13401 10 12 10C15.866 10 19 13.134 19 17C19 18.3608 18.2793 19.3876 17.2994 20.0441C16.3368 20.689 15.1024 21 13.9218 21H10.0782C8.89764 21 7.66323 20.689 6.70065 20.0441C5.72071 19.3876 5 18.3608 5 17ZM15.25 4C14.7887 4 14.25 4.46244 14.25 5.25C14.25 6.03756 14.7887 6.5 15.25 6.5C15.7113 6.5 16.25 6.03756 16.25 5.25C16.25 4.46244 15.7113 4 15.25 4ZM12.75 5.25C12.75 3.82842 13.7783 2.5 15.25 2.5C16.7217 2.5 17.75 3.82842 17.75 5.25C17.75 6.67158 16.7217 8 15.25 8C13.7783 8 12.75 6.67158 12.75 5.25ZM19.5 8.75C19.5 7.96244 20.0387 7.5 20.5 7.5C20.9613 7.5 21.5 7.96244 21.5 8.75C21.5 9.53756 20.9613 10 20.5 10C20.0387 10 19.5 9.53756 19.5 8.75ZM20.5 6C19.0283 6 18 7.32842 18 8.75C18 10.1716 19.0283 11.5 20.5 11.5C21.9717 11.5 23 10.1716 23 8.75C23 7.32842 21.9717 6 20.5 6Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/animal_paw_print_24_regular.svg";

Details

Keywords

petcreaturecatkittendogpuppyfriend