Translate Auto icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.8065 1.53049C12.3935 1.49907 12.0332 1.80843 12.0018 2.22145C11.9704 2.63447 12.2798 2.99475 12.6928 3.02617C14.2691 3.14605 15.7316 3.67187 16.9768 4.50001H16.25C15.8358 4.50001 15.5 4.83579 15.5 5.25001C15.5 5.66422 15.8358 6.00001 16.25 6.00001H18.75C19.1642 6.00001 19.5 5.66422 19.5 5.25001V2.75001C19.5 2.33579 19.1642 2.00001 18.75 2.00001C18.3358 2.00001 18 2.33579 18 2.75001V3.38215C16.5065 2.34051 14.7287 1.67667 12.8065 1.53049ZM7.75 19.5H7.02311C8.26912 20.3286 9.73268 20.8545 11.3101 20.9739C11.7232 21.0052 12.0327 21.3654 12.0014 21.7784C11.9701 22.1914 11.61 22.5009 11.1969 22.4696C9.27348 22.3241 7.4944 21.6601 6 20.6179V21.25C6 21.6642 5.66421 22 5.25 22C4.83579 22 4.5 21.6642 4.5 21.25V18.75C4.5 18.3358 4.83579 18 5.25 18H7.75C8.16421 18 8.5 18.3358 8.5 18.75C8.5 19.1642 8.16421 19.5 7.75 19.5ZM7.96084 5.52974C5.72117 4.87813 3.95773 5.68087 3.38512 5.99685C3.02245 6.19697 2.89069 6.65319 3.09081 7.01586C3.29093 7.37852 3.74715 7.51029 4.10982 7.31017C4.51469 7.08675 5.84606 6.47698 7.54098 6.96978C8.31403 7.19679 8.63905 7.60895 8.80538 8.02581C8.93783 8.35777 8.97952 8.71671 8.99259 9.06798C8.72336 8.99278 8.41199 8.91798 8.07049 8.85729C6.93793 8.65601 5.38792 8.59466 3.94794 9.28441C2.36169 10.0442 1.81748 11.6007 2.04591 12.9814C2.27037 14.3381 3.26232 15.648 4.84609 15.933C6.2756 16.1903 7.65146 15.6771 8.60343 15.1716C8.74209 15.098 8.87408 15.0233 8.9985 14.9493V15.2499C8.9985 15.6641 9.33429 15.9999 9.7485 15.9999C10.1627 15.9999 10.4985 15.6641 10.4985 15.2499L10.4985 9.46019C10.4988 9.00607 10.4993 8.22358 10.1986 7.46992C9.86774 6.64078 9.19434 5.89161 7.96246 5.53021L7.96084 5.52974ZM8.9985 10.6385V13.1445C8.96621 13.169 8.93112 13.1952 8.89337 13.2228C8.6526 13.399 8.3091 13.6295 7.89995 13.8468C7.05912 14.2933 6.0502 14.6256 5.11177 14.4567C4.26739 14.3048 3.66714 13.5909 3.52579 12.7366C3.3884 11.9061 3.70477 11.0641 4.59594 10.6372C5.63338 10.1403 6.82165 10.1588 7.80802 10.3342C8.29139 10.4201 8.70564 10.54 8.9985 10.6385ZM16.9606 7.98628C17.0911 7.59316 16.8782 7.16868 16.4851 7.03817C16.092 6.90766 15.6675 7.12054 15.537 7.51365C15.3891 7.95915 15.233 8.55361 15.1174 9.02612C14.3812 9.05132 13.6717 9.04417 13.0505 9.00168C12.6372 8.97342 12.2793 9.28551 12.251 9.69876C12.2228 10.112 12.5349 10.4699 12.9481 10.4982C13.5112 10.5367 14.1383 10.5486 14.7923 10.5354C14.6486 11.3011 14.5511 11.9846 14.4921 12.5993C13.2772 13.2417 12.431 14.1039 11.9536 15.0116C11.3404 16.1773 11.293 17.5681 12.1588 18.4545C12.7306 19.0389 13.5672 19.0948 14.2882 18.94C14.6937 18.8529 15.1137 18.6917 15.5284 18.4658L15.5363 18.4863L15.5461 18.5122C15.691 18.9003 16.123 19.0975 16.511 18.9526C16.8991 18.8078 17.0963 18.3758 16.9514 17.9877C16.8948 17.8361 16.8378 17.6964 16.7811 17.5638C17.8044 16.6281 18.6958 15.2555 19.0663 13.5171C19.704 13.8292 20.1355 14.3526 20.3443 14.9164C20.5716 15.53 20.5572 16.2287 20.2472 16.8691C19.9396 17.5044 19.3147 18.1336 18.2319 18.5499C17.8453 18.6986 17.6524 19.1325 17.8011 19.5191C17.9497 19.9057 18.3837 20.0986 18.7703 19.95C20.1568 19.4168 21.101 18.5477 21.5972 17.5227C22.091 16.5028 22.1153 15.3793 21.7509 14.3954C21.3377 13.2795 20.4505 12.3851 19.2466 11.9718C19.2485 11.8983 19.2494 11.8244 19.2494 11.7499C19.2494 11.3357 18.9136 10.9999 18.4994 10.9999C18.0941 10.9999 17.7638 11.3215 17.7498 11.7233C17.2249 11.7192 16.6648 11.7941 16.0776 11.9612C16.1409 11.5056 16.2253 11.0074 16.3347 10.4611C17.519 10.3717 18.6981 10.2086 19.6708 9.98005C20.0741 9.88532 20.3242 9.48164 20.2294 9.07841C20.1347 8.67517 19.731 8.42508 19.3278 8.51981C18.5598 8.70023 17.638 8.83768 16.6897 8.92596C16.7758 8.59615 16.8712 8.25548 16.9606 7.98628ZM13.2811 15.7099C13.5074 15.2797 13.881 14.8235 14.427 14.4102C14.4442 14.9012 14.4926 15.3354 14.5639 15.7273C14.6582 16.2459 14.7998 16.7011 14.95 17.0996C14.6448 17.2708 14.3185 17.3993 13.9734 17.4734C13.4885 17.5775 13.2861 17.4617 13.231 17.4054C12.9922 17.1609 12.8375 16.5533 13.2811 15.7099ZM17.5952 13.2224C17.3862 14.1891 16.8948 15.2445 16.1816 16.0705C16.1288 15.8869 16.081 15.686 16.0397 15.4589C15.9506 14.9693 15.8999 14.367 15.9279 13.5928C16.0374 13.5508 16.1504 13.5104 16.2668 13.4719C16.7484 13.313 17.1917 13.235 17.5952 13.2224Z" 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_auto_24_regular.svg";

Details

Keywords

texttypeletterautomatically