Skip Back 15 icon

Use the Skip Back 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 { SkipBack1524Regular, SkipBack1524Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_skip_back_15_24_regular.svg" width="24" height="24" alt="Skip Back 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="M2 3.25C2 2.83579 2.33578 2.5 2.74999 2.5C3.1642 2.5 3.49999 2.83579 3.49999 3.25V6.64949C4.65345 5.26153 6.14955 4.08673 8.02826 3.50536C10.4069 2.7693 12.9318 2.83072 15.2614 3.69728C17.5773 4.55877 19.7655 6.30687 20.9075 8.38964C21.1066 8.75284 20.9736 9.20871 20.6105 9.40785C20.2473 9.607 19.7914 9.47401 19.5922 9.11081C18.6479 7.38847 16.7673 5.85787 14.7384 5.10317C12.7232 4.35354 10.5381 4.29885 8.47169 4.93832C6.77033 5.4648 5.40077 6.60212 4.34273 8H8.25011C8.66432 8 9.00011 8.33579 9.00011 8.75C9.00011 9.16421 8.66432 9.5 8.25011 9.5H2.74999C2.33578 9.5 2 9.16421 2 8.75V3.25ZM9.50022 11.75C9.50022 11.4138 9.27643 11.1186 8.95266 11.0278C8.629 10.9371 8.28503 11.072 8.11019 11.359L8.10951 11.3602L8.10417 11.3687C8.0988 11.3772 8.08989 11.3913 8.07751 11.4103C8.05276 11.4483 8.01427 11.5061 7.96279 11.5793C7.85963 11.7261 7.70552 11.9334 7.50653 12.1678C7.10401 12.6421 6.53976 13.2017 5.86438 13.6069C5.5092 13.82 5.39402 14.2807 5.60713 14.6359C5.82024 14.9911 6.28093 15.1062 6.63611 14.8931C7.16004 14.5788 7.61793 14.202 8.00023 13.8328V20.25C8.00023 20.6642 8.33601 21 8.75022 21C9.16443 21 9.50022 20.6642 9.50022 20.25V11.75ZM17.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_back_15_24_regular.svg";

Details