Sport American Football icon

Use the Sport American Football 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 { SportAmericanFootball24Regular, SportAmericanFootball24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SportAmericanFootball24Regular aria-label="Sport American Football" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sport_american_football_24_regular.svg" width="24" height="24" alt="Sport American Football">

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="M13.7197 9.21967C14.0126 8.92678 14.4874 8.92678 14.7803 9.21967C15.0732 9.51256 15.0732 9.98744 14.7803 10.2803L10.2803 14.7803C9.98744 15.0732 9.51256 15.0732 9.21967 14.7803C8.92678 14.4874 8.92678 14.0126 9.21967 13.7197L13.7197 9.21967ZM17.75 2C20.0972 2 22 3.90279 22 6.25V7.25C22 15.3962 15.3962 22 7.25 22H6.25C3.90279 22 2 20.0972 2 17.75V16.75C2 8.6038 8.6038 2 16.75 2H17.75ZM20.5 6.25C20.5 4.73122 19.2688 3.5 17.75 3.5H16.75C16.3467 3.5 15.9477 3.51801 15.5536 3.55328L20.4467 8.44631C20.482 8.05225 20.5 7.65323 20.5 7.25V6.25ZM20.1533 10.2742L13.7257 3.84671C8.80386 4.9958 4.93665 8.88827 3.82414 13.8241L10.176 20.1758C15.1118 19.0633 19.0043 15.1961 20.1533 10.2742ZM3.54378 15.665C3.51478 16.0229 3.5 16.3847 3.5 16.75V17.75C3.5 19.2688 4.73122 20.5 6.25 20.5H7.25C7.61532 20.5 7.97719 20.4852 8.33504 20.4562L3.54378 15.665Z" 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/sport_american_football_24_regular.svg";

Details