Skip Forward Tab icon
Used in playback controls. Collection includes Fastforward, Rewind, Previous, Next, Stop, Pause. The Skip Forward Tab icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Skip Forward Tab 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 { SkipForwardTab24Regular, SkipForwardTab24Filled } from "@fluentui/react-icons";
export function Example() {
return <SkipForwardTab24Regular aria-label="Skip Forward Tab" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_skip_forward_tab_24_regular.svg" width="24" height="24" alt="Skip Forward Tab"> 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="M21.5 3.75C21.5 3.33579 21.1642 3 20.75 3C20.3358 3 20 3.33579 20 3.75V7.14949C18.8465 5.76153 17.3504 4.58673 15.4717 4.00536C13.0931 3.2693 10.5682 3.33072 8.23861 4.19728C5.92268 5.05877 3.73451 6.80687 2.59251 8.88964C2.39336 9.25283 2.52635 9.7087 2.88955 9.90785C3.25274 10.107 3.70861 9.97401 3.90776 9.61081C4.85214 7.88846 6.73271 6.35787 8.76156 5.60317C10.7768 4.85354 12.9619 4.79885 15.0283 5.43832C16.7297 5.9648 18.0992 7.10212 19.1573 8.5H15.2499C14.8357 8.5 14.4999 8.83578 14.4999 9.25C14.4999 9.66421 14.8357 10 15.2499 10H20.75C21.1642 10 21.5 9.66421 21.5 9.25V3.75ZM8 14C7.72386 14 7.5 14.2239 7.5 14.5V18.5C7.5 18.7761 7.72386 19 8 19H16C16.2761 19 16.5 18.7761 16.5 18.5V14.5C16.5 14.2239 16.2761 14 16 14H8ZM6 14.5C6 13.3954 6.89543 12.5 8 12.5H16C17.1046 12.5 18 13.3954 18 14.5V18.5C18 19.6046 17.1046 20.5 16 20.5H8C6.89543 20.5 6 19.6046 6 18.5V14.5Z" 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_tab_24_regular.svg";Details
| Name | Skip Forward Tab |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_skip_forward_tab_24_regular.svg |
| Filled file | ic_fluent_skip_forward_tab_24_filled.svg |
| React components | SkipForwardTab24Regular, SkipForwardTab24Filled |
| License | MIT (© Microsoft Corporation) |