Communication Shield icon
Used for general connection scenarios (airdrop, cast, etc). The Communication Shield 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 Communication Shield 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 { CommunicationShield24Regular, CommunicationShield24Filled } from "@fluentui/react-icons";
export function Example() {
return <CommunicationShield24Regular aria-label="Communication Shield" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_communication_shield_24_regular.svg" width="24" height="24" alt="Communication Shield"> 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="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.3447 4.44841 16.4665 5.98432 18.0051C6.27696 18.2983 6.27655 18.7732 5.9834 19.0658C5.69025 19.3584 5.21538 19.358 4.92274 19.0649C3.11755 17.2565 2 14.7581 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 12.3242 21.9846 12.6449 21.9544 12.9613C21.4046 12.7814 20.9075 12.4864 20.4981 12.1839C20.4993 12.1228 20.5 12.0615 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM13.0563 14.2666C13.219 13.6831 13.711 13.2887 14.2214 13.148C14.3994 12.8043 14.5 12.4139 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C12.3775 14.5 12.7354 14.4163 13.0563 14.2666ZM17.3 11.4872C17.6073 11.1801 18.0128 11.0182 18.4238 11.0015C17.9434 7.88565 15.2503 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 13.7958 6.22927 15.4228 7.40601 16.5984C7.69905 16.8912 8.17392 16.8909 8.46667 16.5979C8.75943 16.3049 8.7592 15.83 8.46617 15.5372C7.55952 14.6315 7 13.3818 7 12C7 9.23858 9.23858 7 12 7C14.686 7 16.8773 9.11792 16.995 11.7748C17.1105 11.672 17.2127 11.5744 17.3 11.4872ZM11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12ZM18.9896 12.1945C19.6423 12.8454 20.8965 13.8805 22.439 14.0928C22.7466 14.1352 23 14.3779 23 14.6817V17.5203C23 21.3363 19.4206 22.7212 18.6467 22.9761C18.5498 23.008 18.4509 23.008 18.354 22.9761C17.5801 22.7213 14.0003 21.3363 14.0003 17.5203L14 14.6818C14 14.378 14.2534 14.1352 14.561 14.0928C16.1032 13.8804 17.3575 12.8454 18.0103 12.1945C18.2704 11.9351 18.7295 11.9352 18.9896 12.1945Z" 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/communication_shield_24_regular.svg";Details
| Name | Communication Shield |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_communication_shield_24_regular.svg |
| Filled file | ic_fluent_communication_shield_24_filled.svg |
| React components | CommunicationShield24Regular, CommunicationShield24Filled |
| License | MIT (© Microsoft Corporation) |