Star Line Horizontal 3 icon

Use the Star Line Horizontal 3 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 { StarLineHorizontal324Regular, StarLineHorizontal324Filled } from "@fluentui/react-icons";

export function Example() {
  return <StarLineHorizontal324Regular aria-label="Star Line Horizontal 3" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_star_line_horizontal_3_24_regular.svg" width="24" height="24" alt="Star Line Horizontal 3">

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="M13.209 3.10218C12.7138 2.09877 11.283 2.09875 10.7878 3.10215L8.42988 7.87982L3.15735 8.64597C2.05005 8.80687 1.60791 10.1676 2.40916 10.9487L6.2244 14.6676L5.32374 19.9188C5.13459 21.0216 6.29213 21.8626 7.28252 21.342L12.3474 18.6792C12.7141 18.4864 12.855 18.033 12.6623 17.6663C12.4695 17.2997 12.016 17.1587 11.6494 17.3515L6.85353 19.8728L7.71614 14.8434C7.79125 14.4055 7.64606 13.9587 7.32788 13.6485L3.67382 10.0867L8.72361 9.35289C9.16332 9.289 9.54344 9.01283 9.74008 8.61439L11.9984 4.03855L14.487 9.0815C14.6134 9.33751 14.8741 9.4996 15.1596 9.4996H21.2496C21.6638 9.4996 21.9996 9.16381 21.9996 8.7496C21.9996 8.33538 21.6638 7.9996 21.2496 7.9996H15.6258L13.209 3.10218ZM14.5 12.7496C14.5 12.3354 14.8358 11.9996 15.25 11.9996H21.25C21.6642 11.9996 22 12.3354 22 12.7496C22 13.1638 21.6642 13.4996 21.25 13.4996H15.25C14.8358 13.4996 14.5 13.1638 14.5 12.7496ZM14.5 16.7496C14.5 16.3354 14.8358 15.9996 15.25 15.9996H21.25C21.6642 15.9996 22 16.3354 22 16.7496C22 17.1638 21.6642 17.4996 21.25 17.4996H15.25C14.8358 17.4996 14.5 17.1638 14.5 16.7496Z" 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/star_line_horizontal_3_24_regular.svg";

Details

Keywords

favoriteratingvotenavigation