Fluent Icons

Rocket icon

Used to represent getting started, successful progress, or space scenarios. The Rocket icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_rocket_24_regular.svg

Rocket icon in React

npm install @fluentui/react-icons

import { Rocket24Regular } from "@fluentui/react-icons";

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

Rocket icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/rocket_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/rocket_24_regular.svg" width="24" height="24" alt="Rocket">

Rocket icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Rocket())" />

Rocket icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.rocket_24_regular)

Rocket icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF678;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF678;" FontSize="24" />

Rocket icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_rocket_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f678";
  font-size: 24px;
}

Rocket icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_rocket_24_regular" />

// Kotlin
R.drawable.ic_fluent_rocket_24_regular

Rocket icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .rocket24Regular)

Rocket icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Rocket 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 { Rocket24Regular, Rocket24Filled } from "@fluentui/react-icons";

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

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

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

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.0572 7.43077C14.0335 6.45446 15.6164 6.45446 16.5927 7.43077C17.569 8.40708 17.569 9.98999 16.5927 10.9663C15.6164 11.9426 14.0335 11.9426 13.0572 10.9663C12.0809 9.98999 12.0809 8.40708 13.0572 7.43077ZM15.532 8.49143C15.1415 8.10091 14.5084 8.1009 14.1178 8.49143C13.7273 8.88195 13.7273 9.51512 14.1178 9.90564C14.5084 10.2962 15.1415 10.2962 15.532 9.90564C15.9226 9.51512 15.9226 8.88195 15.532 8.49143ZM21.5086 4.32216C21.2398 3.45736 20.5625 2.78032 19.6976 2.5119L19.0355 2.30643C16.642 1.5636 14.034 2.20802 12.2618 3.98013L11.266 4.97601C9.89622 3.94737 7.94316 4.05621 6.69685 5.30253L5.45432 6.54506C5.16142 6.83795 5.16142 7.31283 5.45432 7.60572L7.04529 9.19669L6.86548 9.3765C6.18206 10.0599 6.18206 11.168 6.86548 11.8514L7.36083 12.3467L5.96527 13.1427C5.76212 13.2585 5.62465 13.4625 5.59352 13.6943C5.56238 13.9261 5.64115 14.1591 5.80651 14.3245L9.69562 18.2136C9.86086 18.3788 10.0937 18.4576 10.3253 18.4267C10.557 18.3957 10.7609 18.2585 10.877 18.0557L11.6749 16.6608L12.1721 17.1579C12.8555 17.8414 13.9635 17.8414 14.6469 17.1579L14.8237 16.9812L16.4133 18.5708C16.7062 18.8636 17.1811 18.8636 17.474 18.5708L18.7165 17.3282C19.9623 16.0824 20.0716 14.1303 19.0442 12.7607L20.0421 11.7627C21.8149 9.98994 22.4591 7.38062 21.715 4.98647L21.5086 4.32216ZM19.253 3.94449C19.6461 4.0665 19.954 4.37425 20.0762 4.76734L20.2826 5.43165C20.8613 7.29377 20.3603 9.32324 18.9815 10.7021L13.5863 16.0973C13.4886 16.1949 13.3303 16.1949 13.2327 16.0973L7.92614 10.7907C7.82851 10.6931 7.82851 10.5348 7.92614 10.4372L13.3225 5.04079C14.7008 3.66249 16.7293 3.16127 18.5909 3.73902L19.253 3.94449ZM17.9641 13.8408C18.4166 14.6065 18.3139 15.6095 17.6558 16.2676L16.9436 16.9798L15.8844 15.9205L17.9641 13.8408ZM7.75751 6.36319C8.41602 5.70468 9.42005 5.60227 10.186 6.05596L8.10595 8.13603L7.04531 7.07539L7.75751 6.36319ZM10.5756 15.5615L10.0623 16.4589L7.56209 13.9588L8.46047 13.4464L10.5756 15.5615ZM6.68987 18.3942C6.98276 18.1013 6.98276 17.6264 6.68987 17.3335C6.39697 17.0406 5.9221 17.0406 5.62921 17.3335L3.15433 19.8084C2.86144 20.1013 2.86144 20.5762 3.15433 20.8691C3.44723 21.162 3.9221 21.162 4.21499 20.8691L6.68987 18.3942ZM4.74529 15.389C5.03818 15.6819 5.03818 16.1568 4.74529 16.4497L3.68463 17.5103C3.39173 17.8032 2.91686 17.8032 2.62397 17.5103C2.33107 17.2174 2.33107 16.7425 2.62397 16.4497L3.68463 15.389C3.97752 15.0961 4.45239 15.0961 4.74529 15.389ZM8.63238 20.3408C8.92528 20.0479 8.92528 19.5731 8.63239 19.2802C8.33951 18.9873 7.86463 18.9873 7.57173 19.2802L6.51313 20.3387C6.22023 20.6316 6.22023 21.1065 6.51312 21.3994C6.80601 21.6923 7.28088 21.6923 7.57378 21.3994L8.63238 20.3408Z" fill="currentColor"/></svg>

Details

NameRocket
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_rocket_24_regular.svg
Filled fileic_fluent_rocket_24_filled.svg
React (Regular)Rocket16Regular, Rocket20Regular, Rocket24Regular, Rocket28Regular, Rocket32Regular, Rocket48Regular
React (Filled)Rocket16Filled, Rocket20Filled, Rocket24Filled, Rocket28Filled, Rocket32Filled, Rocket48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

newspace

Related icons

Home AddAddAdd CircleAdd SquareAdd Square MultipleAdd Subtract CircleBalconyBuilding TownhouseBuilding YurtComposeDocument AddFlash Add