Arrow Bottom Linear Icon for Angular

HTML Angular React Vue

<svg [cIcon]="icons.cilArrowBottom"></svg>

Check how to use CoreUI Icons in your project

Download this icon

Browse All Icons

About

The arrow bottom linear icon indicates downward direction or action in Angular applications. Use this icon for dropdown menus, scroll indicators, sort descending actions, or downward navigation. Perfect for navigation systems, data tables, and expandable interfaces built with Angular.

The linear style provides clear directional indication while maintaining visual simplicity across all screen sizes, making it ideal for UI controls in both desktop and mobile Angular applications. This icon integrates seamlessly with CoreUI’s Angular component library.

Common Use Cases

Dropdown Trigger

Indicate expandable dropdown menus in your Angular navigation

Sort Descending

Enable descending sort order in Angular data tables

Scroll Indicator

Show more content available below in Angular interfaces

Best Practices

Animate rotation when expanding/collapsing for better UX
Use consistent arrow direction across similar UI patterns
Ensure sufficient click/tap target size on mobile

Installation

To start using CoreUI Angular Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:

Using npm

npm install @coreui/icons @coreui/icons-angular

Using yarn

yarn add @coreui/icons @coreui/icons-angular

Usage

Once you have the package installed, you can import and use the icons in your Angular project. Here's a basic example:

import { IconModule } from '@coreui/icons-angular';
import { cilArrowBottom } from '@coreui/icons';

// In your component template:
<svg [cIcon]="icons.cilArrowBottom"></svg>