Translate icon

Use the Translate 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 { Translate24Regular, Translate24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Translate24Regular aria-label="Translate" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_translate_24_regular.svg" width="24" height="24" alt="Translate">

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.38512 5.99684C3.95773 5.68087 5.72117 4.87812 7.96084 5.52973L7.96246 5.5302C9.19434 5.89161 9.86774 6.64077 10.1986 7.46992C10.4993 8.22357 10.4988 9.00607 10.4985 9.46019L10.4985 15.2499C10.4985 15.6641 10.1627 15.9999 9.7485 15.9999C9.33429 15.9999 8.9985 15.6641 8.9985 15.2499V14.9493C8.87408 15.0233 8.74209 15.098 8.60343 15.1716C7.65146 15.6771 6.2756 16.1903 4.84609 15.933C3.26232 15.648 2.27037 14.3381 2.04591 12.9814C1.81748 11.6007 2.36169 10.0442 3.94794 9.2844C5.38792 8.59465 6.93793 8.656 8.07049 8.85729C8.41199 8.91798 8.72336 8.99277 8.99259 9.06798C8.97952 8.71671 8.93783 8.35777 8.80538 8.02581C8.63905 7.60895 8.31403 7.19678 7.54098 6.96977C5.84606 6.47698 4.51469 7.08675 4.10982 7.31016C3.74715 7.51028 3.29093 7.37851 3.09081 7.01585C2.89069 6.65319 3.02245 6.19696 3.38512 5.99684ZM7.80802 10.3341C6.82165 10.1588 5.63338 10.1403 4.59594 10.6372C3.70477 11.0641 3.3884 11.9061 3.52579 12.7366C3.66714 13.5909 4.26739 14.3048 5.11177 14.4567C6.0502 14.6256 7.05912 14.2933 7.89995 13.8468C8.3091 13.6295 8.6526 13.399 8.89337 13.2228C8.93112 13.1952 8.96621 13.169 8.9985 13.1445V10.6384C8.70564 10.54 8.29139 10.4201 7.80802 10.3341ZM16.4851 7.03816C16.8782 7.16867 17.0911 7.59315 16.9606 7.98627C16.8712 8.25548 16.7758 8.59615 16.6897 8.92595C17.638 8.83768 18.5598 8.70023 19.3278 8.5198C19.731 8.42507 20.1347 8.67517 20.2294 9.0784C20.3242 9.48164 20.0741 9.88532 19.6708 9.98005C18.6981 10.2085 17.519 10.3717 16.3347 10.4611C16.2253 11.0074 16.1409 11.5056 16.0776 11.9612C16.6648 11.7941 17.2249 11.7192 17.7498 11.7233C17.7638 11.3214 18.0941 10.9999 18.4994 10.9999C18.9136 10.9999 19.2494 11.3357 19.2494 11.7499C19.2494 11.8244 19.2485 11.8983 19.2466 11.9718C20.4505 12.3851 21.3377 13.2795 21.7509 14.3954C22.1153 15.3793 22.091 16.5028 21.5972 17.5227C21.101 18.5477 20.1568 19.4168 18.7703 19.95C18.3837 20.0986 17.9497 19.9057 17.8011 19.5191C17.6524 19.1325 17.8453 18.6986 18.2319 18.5499C19.3147 18.1336 19.9396 17.5044 20.2472 16.8691C20.5572 16.2287 20.5716 15.53 20.3443 14.9164C20.1355 14.3526 19.704 13.8292 19.0663 13.5171C18.6958 15.2554 17.8044 16.6281 16.7811 17.5638C16.8378 17.6964 16.8948 17.8361 16.9514 17.9877C17.0963 18.3758 16.8991 18.8078 16.511 18.9526C16.123 19.0975 15.691 18.9003 15.5461 18.5122C15.5404 18.4969 15.5345 18.4814 15.5284 18.4658C15.1137 18.6917 14.6937 18.8529 14.2882 18.94C13.5672 19.0948 12.7306 19.0388 12.1588 18.4545C11.293 17.5681 11.3404 16.1773 11.9536 15.0116C12.431 14.1039 13.2772 13.2417 14.4921 12.5993C14.5511 11.9846 14.6486 11.3011 14.7923 10.5354C14.1383 10.5486 13.5112 10.5367 12.9481 10.4982C12.5349 10.4699 12.2228 10.112 12.251 9.69875C12.2793 9.2855 12.6372 8.97341 13.0505 9.00167C13.6717 9.04416 14.3812 9.05131 15.1174 9.02611C15.233 8.55361 15.3891 7.95914 15.537 7.51365C15.6675 7.12053 16.092 6.90765 16.4851 7.03816ZM14.427 14.4102C13.881 14.8235 13.5074 15.2797 13.2811 15.7099C12.8375 16.5533 12.9922 17.1609 13.231 17.4054C13.2861 17.4617 13.4885 17.5775 13.9734 17.4734C14.3185 17.3993 14.6448 17.2708 14.95 17.0996C14.7998 16.7011 14.6582 16.2459 14.5639 15.7273C14.4926 15.3354 14.4442 14.9012 14.427 14.4102ZM16.1816 16.0705C16.8948 15.2445 17.3862 14.1891 17.5952 13.2224C17.1917 13.235 16.7484 13.313 16.2668 13.4719C16.1504 13.5104 16.0374 13.5507 15.9279 13.5928C15.8999 14.367 15.9506 14.9693 16.0397 15.4589C16.081 15.686 16.1288 15.8869 16.1816 16.0705Z" 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/translate_24_regular.svg";

Details

Keywords

texttypeletter