Teddy icon

Use the Teddy 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 { Teddy24Regular, Teddy24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.5 3.875C19.7782 3.875 21.625 5.72183 21.625 8C21.625 9.2471 21.0714 10.365 20.1971 11.1212C20.4748 11.8697 20.625 12.6694 20.625 13.5C20.625 15.89 19.382 18.0188 17.4446 19.4143C17.1624 19.6176 16.8653 19.8054 16.5551 19.9763L16.5183 19.9964C15.2037 20.7125 13.6559 21.125 12 21.125C10.3441 21.125 8.79628 20.7124 7.48166 19.9964C7.1745 19.8291 6.88004 19.6452 6.59991 19.4462L6.55539 19.4143C4.61803 18.0188 3.375 15.89 3.375 13.5C3.375 12.6694 3.52525 11.8697 3.80294 11.1212C2.92856 10.365 2.375 9.2471 2.375 8C2.375 5.72183 4.22183 3.875 6.5 3.875C8.07432 3.875 9.44244 4.75696 10.1376 6.05321C10.7375 5.9365 11.3607 5.875 12 5.875C12.6393 5.875 13.2625 5.9365 13.8624 6.05321C14.5576 4.75696 15.9257 3.875 17.5 3.875ZM13.5225 16.3968C13.4126 16.6012 13.2228 16.7712 12.99 16.8943C12.7145 17.04 12.3705 17.125 12 17.125C11.6296 17.125 11.2856 17.0401 11.0101 16.8944C10.7774 16.7713 10.5876 16.6014 10.4777 16.3971C9.33578 16.8209 8.41869 17.7081 7.95497 18.8301C9.1128 19.4892 10.5008 19.875 12 19.875C13.4993 19.875 14.8874 19.4892 16.0453 18.8299C15.7958 18.2257 15.4115 17.6816 14.9154 17.2378C14.5045 16.8703 14.0326 16.586 13.5225 16.3968ZM12 7.125C7.88428 7.125 4.625 10.0246 4.625 13.5C4.625 15.2987 5.49533 16.9402 6.9074 18.1082C7.80618 16.1978 9.74847 14.875 12 14.875C13.4399 14.875 14.7538 15.4162 15.7487 16.3061C16.3092 16.8075 16.7686 17.4196 17.0926 18.1082C18.5047 16.9402 19.375 15.2987 19.375 13.5C19.375 10.0246 16.1157 7.125 12 7.125ZM6.5 5.125C4.91218 5.125 3.625 6.41218 3.625 8C3.625 8.73272 3.90091 9.41662 4.37336 9.93541C5.34066 8.32097 6.94287 7.05326 8.88195 6.38844C8.35812 5.61513 7.47532 5.125 6.5 5.125ZM17.5 5.125C16.5254 5.125 15.6424 5.6143 15.1181 6.38845C17.0571 7.05327 18.6593 8.32095 19.6266 9.93534C20.1002 9.41558 20.375 8.73173 20.375 8C20.375 6.41218 19.0878 5.125 17.5 5.125Z" 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/teddy_24_regular.svg";

Details

Keywords

animalstuffycomforteventsnuggle