Local Language icon
Contains Japanese (default) & Chinese variant. The Local Language 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 Local Language 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 { LocalLanguage24Regular, LocalLanguage24Filled } from "@fluentui/react-icons";
export function Example() {
return <LocalLanguage24Regular aria-label="Local Language" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_local_language_24_regular.svg" width="24" height="24" alt="Local Language"> 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="M9.34045 6.37226L9.38917 6.4766L14.9493 20.9766C15.0972 21.3624 14.9104 21.7974 14.532 21.9482C14.1852 22.0865 13.7978 21.9379 13.6217 21.6151L13.5791 21.5228L12.1461 17.7857L5.05932 17.7859L4.96527 17.7798L3.4185 21.5398C3.26139 21.9217 2.83032 22.1015 2.45568 21.9413C2.11227 21.7945 1.93548 21.4129 2.02941 21.0561L2.06182 20.9596L8.02575 6.45964C8.26631 5.87479 9.04862 5.84994 9.34045 6.37226ZM18.7457 2.00293C19.1254 2.00293 19.4392 2.28508 19.4888 2.65116L19.4957 2.75293L19.4954 7.49893L21.2457 7.4997C21.6254 7.4997 21.9392 7.78185 21.9888 8.14793L21.9957 8.2497C21.9957 8.62939 21.7135 8.94319 21.3475 8.99285L21.2457 8.9997L19.4954 8.99893L19.4957 16.2497C19.4957 16.6294 19.2135 16.9432 18.8475 16.9929L18.7457 16.9997C18.366 16.9997 18.0522 16.7175 18.0025 16.3515L17.9957 16.2497V2.75293C17.9957 2.33872 18.3315 2.00293 18.7457 2.00293ZM8.81111 8.74708L5.64895 16.2857H11.7589L8.81111 8.74708ZM10.7477 2.00293H16.2455C16.6252 2.00293 16.939 2.28508 16.9887 2.65116L16.9955 2.75293V5.75663C16.9955 8.10121 15.0949 10.0019 12.7503 10.0019C12.3361 10.0019 12.0003 9.66609 12.0003 9.25187C12.0003 8.83766 12.3361 8.50187 12.7503 8.50187C14.2103 8.50187 15.4041 7.36214 15.4905 5.92386L15.4955 5.75663V3.50293H10.7477C10.3335 3.50293 9.99775 3.16714 9.99775 2.75293C9.99775 2.37323 10.2799 2.05944 10.646 2.00978L10.7477 2.00293H16.2455H10.7477Z" 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/local_language_24_regular.svg";Details
| Name | Local Language |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_local_language_24_regular.svg |
| Filled file | ic_fluent_local_language_24_filled.svg |
| React components | LocalLanguage24Regular, LocalLanguage24Filled |
| License | MIT (© Microsoft Corporation) |