Star Add icon
Used in general rating scenarios. The Star Add 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 Star Add 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 { StarAdd24Regular, StarAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <StarAdd24Regular aria-label="Star Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_star_add_24_regular.svg" width="24" height="24" alt="Star Add"> 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="M10.7878 3.10215C11.283 2.09877 12.7138 2.09876 13.209 3.10215L15.567 7.87987L20.8395 8.64601C21.9468 8.80691 22.3889 10.1677 21.5877 10.9487L20.6827 11.8308C20.2104 11.5651 19.7015 11.3567 19.1655 11.215L20.323 10.0867L15.2732 9.35294C14.8335 9.28904 14.4534 9.01288 14.2568 8.61443L11.9984 4.03854L9.74008 8.61443C9.54344 9.01288 9.16332 9.28904 8.72361 9.35294L3.67382 10.0867L7.32788 13.6486C7.64606 13.9587 7.79125 14.4055 7.71614 14.8435L6.85353 19.8729L11.0028 17.6915C11.0185 18.2338 11.1007 18.7595 11.2414 19.2607L7.28252 21.342C6.29213 21.8627 5.13459 21.0217 5.32374 19.9189L6.2244 14.6676L2.40916 10.9487C1.60791 10.1677 2.05005 8.80691 3.15735 8.64601L8.42988 7.87987L10.7878 3.10215ZM23 17.4996C23 14.4621 20.5376 11.9996 17.5 11.9996C14.4624 11.9996 12 14.4621 12 17.4996C12 20.5372 14.4624 22.9996 17.5 22.9996C20.5376 22.9996 23 20.5372 23 17.4996ZM18.0006 17.9996L18.0011 20.5032C18.0011 20.7793 17.7773 21.0032 17.5011 21.0032C17.225 21.0032 17.0011 20.7793 17.0011 20.5032L17.0006 17.9996H14.4956C14.2197 17.9996 13.9961 17.7758 13.9961 17.4996C13.9961 17.2235 14.2197 16.9996 14.4956 16.9996H17.0005L17 14.4989C17 14.2228 17.2239 13.9989 17.5 13.9989C17.7761 13.9989 18 14.2228 18 14.4989L18.0005 16.9996H20.4966C20.7725 16.9996 20.9961 17.2235 20.9961 17.4996C20.9961 17.7758 20.7725 17.9996 20.4966 17.9996H18.0006Z" 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_add_24_regular.svg";Details
| Name | Star Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_star_add_24_regular.svg |
| Filled file | ic_fluent_star_add_24_filled.svg |
| React components | StarAdd24Regular, StarAdd24Filled |
| License | MIT (© Microsoft Corporation) |