Shield Arrow Right icon (Filled & Regular)

The Shield Arrow Right 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 Shield Arrow Right 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 { ShieldArrowRight24Regular, ShieldArrowRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShieldArrowRight24Regular aria-label="Shield Arrow Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shield_arrow_right_24_regular.svg" width="24" height="24" alt="Shield Arrow Right">

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="M3 5.75C3 5.33579 3.33579 5 3.75 5C6.41341 5 9.00797 4.05652 11.55 2.15C11.8167 1.95 12.1833 1.95 12.45 2.15C14.992 4.05652 17.5866 5 20.25 5C20.6642 5 21 5.33579 21 5.75V11C21 11.3381 20.9865 11.6701 20.9595 11.9961C20.5062 11.7106 20.0152 11.4795 19.4955 11.3121C19.4985 11.2087 19.5 11.1047 19.5 11V6.47793C16.9227 6.32585 14.4192 5.38829 12 3.67782C9.58084 5.38829 7.07735 6.32585 4.5 6.47793V11C4.5 15.1488 6.83178 18.2214 11.625 20.2846C11.8882 20.839 12.2276 21.3503 12.6297 21.8048C12.5126 21.8531 12.3944 21.9007 12.2749 21.9478C12.0982 22.0174 11.9018 22.0174 11.7251 21.9478C5.95756 19.6757 3 16.0012 3 11V5.75ZM23 17.4961C23 14.4585 20.5376 11.9961 17.5 11.9961C14.4624 11.9961 12 14.4585 12 17.4961C12 20.5337 14.4624 22.9961 17.5 22.9961C20.5376 22.9961 23 20.5337 23 17.4961ZM14 17.4961C14 17.22 14.2239 16.9961 14.5 16.9961L19.2929 16.9961L17.6464 15.3497C17.4512 15.1544 17.4512 14.8378 17.6464 14.6425C17.8417 14.4473 18.1583 14.4473 18.3536 14.6425L20.8536 17.1425C21.0488 17.3378 21.0488 17.6544 20.8536 17.8497L18.3536 20.3497C18.1583 20.5449 17.8417 20.5449 17.6464 20.3497C17.4512 20.1544 17.4512 19.8378 17.6464 19.6425L19.2929 17.9961L14.5 17.9961C14.2239 17.9961 14 17.7722 14 17.4961Z" 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/shield_arrow_right_24_regular.svg";

Details

Name	Shield Arrow Right
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_shield_arrow_right_24_regular.svg`
Filled file	`ic_fluent_shield_arrow_right_24_filled.svg`
React components	`ShieldArrowRight24Regular, ShieldArrowRight24Filled`
License	MIT (© Microsoft Corporation)

Shield Arrow Right icon

Use the Shield Arrow Right icon in React

Use it in HTML

Use it from the SVG package

Details

Related icons