Direction icon
icon-park:direction
The Direction icon (icon-park:direction) is a free SVG icon from the IconPark set by ByteDance. It is drawn on a 48 × 48 grid. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- IconPark
- Author
- ByteDance
- License
- Apache-2.0
- Size
- 48 × 48
- Category
- Edit
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none"><rect width="36" height="36" x="6" y="6" fill="#2F88FF" stroke="#000" stroke-width="4" rx="3"/><path fill="#fff" d="M23.293 10.5649L20.0504 13.8075C19.4204 14.4375 19.8666 15.5146 20.7575 15.5146H27.2428C28.1337 15.5146 28.5798 14.4375 27.9499 13.8075L24.7072 10.5649C24.3167 10.1744 23.6835 10.1744 23.293 10.5649Z"/><path fill="#fff" d="M10.5649 24.707L13.8075 27.9496C14.4375 28.5796 15.5146 28.1334 15.5146 27.2425V20.7572C15.5146 19.8663 14.4375 19.4202 13.8075 20.0501L10.5649 23.2928C10.1744 23.6833 10.1744 24.3165 10.5649 24.707Z"/><path fill="#fff" d="M24.707 37.4351L27.9496 34.1925C28.5796 33.5625 28.1334 32.4854 27.2425 32.4854H20.7572C19.8663 32.4854 19.4202 33.5625 20.0501 34.1925L23.2928 37.4351C23.6833 37.8256 24.3165 37.8256 24.707 37.4351Z"/><path fill="#fff" d="M37.4351 23.293L34.1925 20.0504C33.5625 19.4204 32.4854 19.8666 32.4854 20.7575V27.2428C32.4854 28.1337 33.5625 28.5798 34.1925 27.9499L37.4351 24.7072C37.8256 24.3167 37.8256 23.6835 37.4351 23.293Z"/></g></svg>
How to use the Direction icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:direction" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:direction" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:direction" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--direction]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:direction"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:direction"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/direction.svg" alt="Direction icon" width="24" height="24">
Related icons in IconPark
Direction icon in other icon sets
Direction icon FAQ
Is the Direction icon free for commercial use?
Yes. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Direction icon in React?
Install @iconify/react and render <Icon icon="icon-park:direction" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Direction icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/direction.svg" alt="Direction icon">, or paste the SVG code inline to style it with CSS.
Browse all IconPark icons →
ICONYZ
