Protocol Handler icon
#fluent-icon The Protocol Handler 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 Protocol Handler 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 { ProtocolHandler24Regular, ProtocolHandler24Filled } from "@fluentui/react-icons";
export function Example() {
return <ProtocolHandler24Regular aria-label="Protocol Handler" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_protocol_handler_24_regular.svg" width="24" height="24" alt="Protocol Handler"> 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.7319 17.7319L12.7067 16.7067L13.7674 15.6461L14.7925 16.6712C15.183 17.0617 15.8162 17.0617 16.2067 16.6712L20.1712 12.7067C20.5617 12.3162 20.5617 11.683 20.1712 11.2925L16.2067 7.32805C15.8162 6.93753 15.183 6.93752 14.7925 7.32805L13.7674 8.35318L12.7067 7.29251L13.7319 6.26739C14.7082 5.29108 16.2911 5.29108 17.2674 6.26739L21.2319 10.2319C22.2082 11.2082 22.2082 12.7911 21.2319 13.7674L17.2674 17.7319C16.2911 18.7082 14.7082 18.7082 13.7319 17.7319ZM6.73185 6.26739L2.76739 10.2319C1.79108 11.2082 1.79108 12.7911 2.76739 13.7674L6.73185 17.7319C7.70817 18.7082 9.29108 18.7082 10.2674 17.7319L14.2319 13.7674C15.2082 12.7911 15.2082 11.2082 14.2319 10.2319L10.2674 6.26739C9.29108 5.29108 7.70816 5.29108 6.73185 6.26739ZM3.82805 11.2925L7.79251 7.32805C8.18304 6.93752 8.8162 6.93753 9.20673 7.32805L13.1712 11.2925C13.5617 11.683 13.5617 12.3162 13.1712 12.7067L9.20673 16.6712C8.8162 17.0617 8.18304 17.0617 7.79251 16.6712L3.82805 12.7067C3.43752 12.3162 3.43753 11.683 3.82805 11.2925Z" 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/protocol_handler_24_regular.svg";Details
| Name | Protocol Handler |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_protocol_handler_24_regular.svg |
| Filled file | ic_fluent_protocol_handler_24_filled.svg |
| React components | ProtocolHandler24Regular, ProtocolHandler24Filled |
| License | MIT (© Microsoft Corporation) |