Lightning Outline icon

solar:lightning-outline

The Lightning Outline icon (solar:lightning-outline) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: Devices
Tags: lightningoutline

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M10.25 5C10.25 4.58579 10.5858 4.25 11 4.25H13C13.4142 4.25 13.75 4.58579 13.75 5C13.75 5.41422 13.4142 5.75 13 5.75H11C10.5858 5.75 10.25 5.41422 10.25 5Z"/><path d="M12.6 12.45C12.8485 12.1186 12.7814 11.6485 12.45 11.4C12.1186 11.1515 11.6485 11.2186 11.4 11.55L9.9 13.55C9.72956 13.7773 9.70214 14.0813 9.82918 14.3354C9.95623 14.5895 10.2159 14.75 10.5 14.75H12L11.4 15.55C11.1515 15.8814 11.2186 16.3515 11.55 16.6C11.8814 16.8485 12.3515 16.7814 12.6 16.45L14.1 14.45C14.2705 14.2227 14.2979 13.9187 14.1708 13.6646C14.0438 13.4105 13.7841 13.25 13.5 13.25H12L12.6 12.45Z"/><path fill-rule="evenodd" d="M11.9617 1.25C11.2921 1.24998 10.7333 1.24997 10.281 1.29599C9.80755 1.34415 9.36818 1.44886 8.97218 1.71346C8.67191 1.9141 8.4141 2.17191 8.21346 2.47218C7.94887 2.86818 7.84415 3.30755 7.79599 3.78102C7.74997 4.23335 7.74999 4.79208 7.75 5.46166L7.75 7.39391C7.14725 7.50876 6.61547 7.72579 6.17668 8.15793C5.66062 8.66617 5.44427 9.30335 5.34476 10.0323C5.24995 10.7268 5.24998 11.605 5.25 12.6733V15.3267C5.24998 16.395 5.24995 17.2732 5.34476 17.9677C5.44427 18.6967 5.66062 19.3338 6.17668 19.8421C6.69115 20.3487 7.33345 20.5597 8.0681 20.657C8.77098 20.75 9.66071 20.75 10.7472 20.75H11.25V22C11.25 22.4142 11.5858 22.75 12 22.75C12.4142 22.75 12.75 22.4142 12.75 22V20.75H13.2527C14.3392 20.75 15.229 20.75 15.9319 20.657C16.6666 20.5597 17.3089 20.3487 17.8233 19.8421C18.3394 19.3338 18.5557 18.6967 18.6552 17.9677C18.7501 17.2732 18.75 16.395 18.75 15.3267V12.6733C18.75 11.605 18.7501 10.7268 18.6552 10.0323C18.5557 9.30335 18.3394 8.66617 17.8233 8.15793C17.3845 7.72579 16.8528 7.50876 16.25 7.39391L16.25 5.46166C16.25 4.79208 16.25 4.23335 16.204 3.78102C16.1559 3.30755 16.0511 2.86818 15.7865 2.47218C15.5859 2.17191 15.3281 1.9141 15.0278 1.71346C14.6318 1.44886 14.1925 1.34415 13.719 1.29599C13.2667 1.24997 12.7079 1.24998 12.0384 1.25H11.9617ZM14.75 7.26197V5.5C14.75 4.78216 14.7491 4.30023 14.7117 3.93283C14.6756 3.57796 14.6118 3.41399 14.5393 3.30554C14.4481 3.16905 14.331 3.05186 14.1945 2.96066C14.086 2.8882 13.922 2.82438 13.5672 2.78828C13.1998 2.75091 12.7178 2.75 12 2.75C11.2822 2.75 10.8002 2.75091 10.4328 2.78828C10.078 2.82438 9.91399 2.8882 9.80554 2.96066C9.66905 3.05186 9.55186 3.16905 9.46067 3.30554C9.3882 3.41399 9.32438 3.57796 9.28828 3.93283C9.25091 4.30023 9.25 4.78216 9.25 5.5V7.26197C9.69973 7.24998 10.1984 7.24999 10.7473 7.25H13.2527C13.8016 7.24999 14.3003 7.24998 14.75 7.26197ZM15.735 19.17C15.1421 19.2485 14.3523 19.25 13.2 19.25H10.8C9.64774 19.25 8.85787 19.2485 8.265 19.17C7.69254 19.0942 7.41768 18.959 7.22921 18.7733C7.04233 18.5893 6.9072 18.3232 6.83098 17.7648C6.75164 17.1837 6.75 16.4085 6.75 15.2727V12.7273C6.75 11.5915 6.75164 10.8163 6.83098 10.2352C6.9072 9.67679 7.04233 9.41071 7.22921 9.22666C7.41768 9.04104 7.69254 8.90585 8.265 8.83005C8.85787 8.75155 9.64774 8.75 10.8 8.75H13.2C14.3523 8.75 15.1421 8.75155 15.735 8.83005C16.3075 8.90585 16.5823 9.04104 16.7708 9.22666C16.9577 9.41071 17.0928 9.67679 17.169 10.2352C17.2484 10.8163 17.25 11.5915 17.25 12.7273V15.2727C17.25 16.4085 17.2484 17.1837 17.169 17.7648C17.0928 18.3232 16.9577 18.5893 16.7708 18.7733C16.5823 18.959 16.3075 19.0942 15.735 19.17Z" clip-rule="evenodd"/></g></svg>

How to use the Lightning Outline icon

React

import { Icon } from "@iconify/react";

<Icon icon="solar:lightning-outline" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="solar:lightning-outline" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="solar:lightning-outline" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--lightning-outline]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:lightning-outline"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="solar:lightning-outline"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/lightning-outline.svg" alt="Lightning Outline icon" width="24" height="24">

Related icons in Solar

Lightning Outline icon in other icon sets

Lightning Outline icon FAQ

Is the Lightning Outline icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Lightning Outline icon in React?

Install @iconify/react and render <Icon icon="solar:lightning-outline" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Lightning Outline icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/lightning-outline.svg" alt="Lightning Outline icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →