Skip Forward 15 icon

Use the Skip Forward 15 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 { SkipForward1524Regular, SkipForward1524Filled } from "@fluentui/react-icons";

export function Example() {
  return <SkipForward1524Regular aria-label="Skip Forward 15" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_skip_forward_15_24_regular.svg" width="24" height="24" alt="Skip Forward 15">

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="M22 3.25C22 2.83579 21.6642 2.5 21.25 2.5C20.8358 2.5 20.5 2.83579 20.5 3.25V6.64949C19.3465 5.26153 17.8504 4.08673 15.9717 3.50536C13.5931 2.7693 11.0682 2.83072 8.73861 3.69728C6.42268 4.55877 4.23451 6.30687 3.09251 8.38964C2.89336 8.75283 3.02635 9.2087 3.38955 9.40785C3.75274 9.607 4.20861 9.47401 4.40776 9.11081C5.35214 7.38846 7.23271 5.85787 9.26156 5.10317C11.2768 4.35354 13.4619 4.29885 15.5283 4.93832C17.2297 5.4648 18.5992 6.60212 19.6573 8H15.7499C15.3357 8 14.9999 8.33578 14.9999 8.75C14.9999 9.16421 15.3357 9.5 15.7499 9.5H21.25C21.6642 9.5 22 9.16421 22 8.75V3.25ZM8.9525 11.0278C9.27626 11.1186 9.50005 11.4138 9.50005 11.75V20.25C9.50005 20.6642 9.16427 21 8.75006 21C8.33585 21 8.00007 20.6642 8.00007 20.25V13.8328C7.61776 14.202 7.15988 14.5788 6.63595 14.8931C6.28077 15.1062 5.82008 14.9911 5.60697 14.6359C5.39386 14.2807 5.50903 13.82 5.86422 13.6069C6.5396 13.2016 7.10384 12.6421 7.50637 12.1678C7.70536 11.9334 7.85946 11.7261 7.96263 11.5793C8.0141 11.5061 8.05259 11.4483 8.07735 11.4103C8.08972 11.3913 8.09864 11.3772 8.10401 11.3687L8.10935 11.3602L8.11003 11.359C8.28486 11.072 8.62884 10.9371 8.9525 11.0278ZM17.2 12.5C17.6142 12.5 17.95 12.1642 17.95 11.75C17.95 11.3358 17.6142 11 17.2 11H13.652C13.2761 11 12.9582 11.2783 12.9086 11.6509L12.5086 14.6508C12.48 14.8651 12.5453 15.0813 12.6877 15.244C12.8301 15.4066 13.0358 15.4999 13.252 15.4999L15.4108 15.4999L15.4204 15.4999C15.5214 15.4986 15.6241 15.5049 15.728 15.5195C16.8218 15.6732 17.5839 16.6846 17.4302 17.7784C17.2765 18.8722 16.2652 19.6343 15.1713 19.4806C14.5019 19.3865 13.9564 18.9719 13.6685 18.4103C13.4796 18.0416 13.0276 17.896 12.659 18.0849C12.2904 18.2738 12.1447 18.7258 12.3337 19.0944C12.8346 20.0718 13.7894 20.8011 14.9626 20.966C16.8768 21.235 18.6466 19.9013 18.9156 17.9871C19.1846 16.073 17.851 14.3031 15.9368 14.0341C15.7588 14.0091 15.5815 13.9979 15.4062 13.9999L14.1086 13.9999L14.3086 12.5H17.2Z" 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/skip_forward_15_24_regular.svg";

Details