Add Starburst icon

Use the Add Starburst 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 { AddStarburst24Regular, AddStarburst24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AddStarburst24Regular aria-label="Add Starburst" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_add_starburst_24_regular.svg" width="24" height="24" alt="Add Starburst">

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.75 7.75001C12.75 7.3358 12.4142 7.00001 12 7.00001C11.5858 7.00001 11.25 7.3358 11.25 7.75001V11.25H7.75001C7.3358 11.25 7.00001 11.5858 7.00001 12C7.00001 12.4142 7.3358 12.75 7.75001 12.75H11.25V16.25C11.25 16.6642 11.5858 17 12 17C12.4142 17 12.75 16.6642 12.75 16.25V12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H12.75V7.75001ZM12.7918 1.38314C12.3915 0.868381 11.6135 0.868381 11.2131 1.38314L9.80044 3.19946C9.73172 3.28782 9.61263 3.31973 9.50894 3.27757L7.37738 2.41092C6.77328 2.1653 6.09951 2.5543 6.01017 3.20028L5.69493 5.47958C5.67959 5.59047 5.59242 5.67764 5.48154 5.69298L3.20223 6.00822C2.55626 6.09756 2.16725 6.77133 2.41287 7.37543L3.27952 9.50699C3.32168 9.61068 3.28977 9.72976 3.20141 9.79849L1.38509 11.2111C0.870334 11.6115 0.870334 12.3895 1.38509 12.7899L3.20141 14.2025C3.28977 14.2712 3.32168 14.3903 3.27952 14.494L2.41287 16.6256C2.16725 17.2297 2.55626 17.9035 3.20223 17.9928L5.48154 18.308C5.59242 18.3234 5.67959 18.4105 5.69493 18.5214L6.01017 20.8007C6.09951 21.4467 6.77328 21.8357 7.37738 21.5901L9.50894 20.7234C9.61263 20.6813 9.73172 20.7132 9.80044 20.8015L11.2131 22.6179C11.6135 23.1326 12.3915 23.1326 12.7918 22.6179L14.2045 20.8015C14.2732 20.7132 14.3923 20.6813 14.496 20.7234L16.6275 21.5901C17.2316 21.8357 17.9054 21.4467 17.9947 20.8007L18.31 18.5214C18.3253 18.4105 18.4125 18.3234 18.5234 18.308L20.8027 17.9928C21.4487 17.9035 21.8377 17.2297 21.592 16.6256L20.7254 14.494C20.6832 14.3903 20.7151 14.2712 20.8035 14.2025L22.6198 12.7899C23.1346 12.3895 23.1346 11.6115 22.6198 11.2111L20.8035 9.79849C20.7151 9.72976 20.6832 9.61068 20.7254 9.50699L21.592 7.37543C21.8377 6.77133 21.4487 6.09756 20.8027 6.00822L18.5234 5.69298C18.4125 5.67764 18.3253 5.59047 18.31 5.47958L17.9947 3.20028C17.9054 2.5543 17.2316 2.1653 16.6275 2.41092L14.496 3.27757C14.3923 3.31973 14.2732 3.28782 14.2045 3.19946L12.7918 1.38314ZM10.9845 4.12036L12.0025 2.81149L13.0204 4.12036C13.5015 4.73887 14.3351 4.96223 15.0609 4.66711L16.597 4.04259L16.8241 5.68508C16.9315 6.46127 17.5417 7.07148 18.3179 7.17883L19.9604 7.406L19.3359 8.94203C19.0407 9.66789 19.2641 10.5015 19.8826 10.9825L21.1915 12.0005L19.8826 13.0185C19.2641 13.4995 19.0407 14.3331 19.3359 15.059L19.9604 16.595L18.3179 16.8222C17.5417 16.9295 16.9315 17.5397 16.8241 18.3159L16.597 19.9584L15.0609 19.3339C14.3351 19.0388 13.5015 19.2621 13.0204 19.8807L12.0025 21.1895L10.9845 19.8807C10.5034 19.2621 9.66985 19.0388 8.94398 19.3339L7.40795 19.9584L7.18079 18.3159C7.07344 17.5397 6.46322 16.9295 5.68704 16.8222L4.04454 16.595L4.66906 15.059C4.96418 14.3331 4.74083 13.4995 4.12231 13.0185L2.81345 12.0005L4.12231 10.9825C4.74083 10.5015 4.96418 9.66789 4.66906 8.94203L4.04454 7.406L5.68704 7.17883C6.46322 7.07148 7.07344 6.46127 7.18079 5.68509L7.40795 4.04259L8.94398 4.66711C9.66985 4.96223 10.5034 4.73887 10.9845 4.12036Z" 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/add_starburst_24_regular.svg";

Details