Customization: Sorting Icons - Datatables for Laravel                  [               Datatables for Laravel  ](/) 

  Toggle main menu         [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing)        Search  ⌘ K   [ Log in ](/login) 

  [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) 

 Search docs and demos  

Type at least 2 characters to search.

    Documentation menu      ### Getting Started

- [ Installation ](https://laravel-datatables.com/docs)
- [ Dark Mode ](https://laravel-datatables.com/docs/dark-mode)

### Basics

- [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table)
- [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns)
- [ Data Sources ](https://laravel-datatables.com/docs/data-sources)
- [ Internationalisation ](https://laravel-datatables.com/docs/internationalisation)
- [ Multi-Language ](https://laravel-datatables.com/docs/multi-language)
- [ Styling ](https://laravel-datatables.com/docs/styling)

### Customization

- [ Columns ](https://laravel-datatables.com/docs/customization-columns)
- [ Cell Renderer ](https://laravel-datatables.com/docs/customization-cell-renderer)
- [ Value Formatter ](https://laravel-datatables.com/docs/customization-value-formatter)
- [ Filters ](https://laravel-datatables.com/docs/customization-filters)
- [ Pagination ](https://laravel-datatables.com/docs/customization-pagination)
- [ Sorting Icons ](https://laravel-datatables.com/docs/customization-sorting-icons)
- [ Row Actions ](https://laravel-datatables.com/docs/customization-row-actions)
- [ Multi Row Actions ](https://laravel-datatables.com/docs/customization-multi-row-actions)
- [ Loading Indicator ](https://laravel-datatables.com/docs/customization-loading-indicator)
- [ Exporting ](https://laravel-datatables.com/docs/customization-exporting)
- [ Components ](https://laravel-datatables.com/docs/customization-components)
- [ Data Sources ](https://laravel-datatables.com/docs/customization-data-sources)
- [ State Persistence ](https://laravel-datatables.com/docs/customization-state-persistence)

### Features

- [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility)
- [ Actions and Forms ](https://laravel-datatables.com/docs/actions-and-forms)
- [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns)
- [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering)
- [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility)
- [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters)
- [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls)
- [ Exporting ](https://laravel-datatables.com/docs/feature-exporting)
- [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers)
- [ Pagination ](https://laravel-datatables.com/docs/feature-pagination)
- [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile)
- [ Row Grouping ](https://laravel-datatables.com/docs/feature-row-grouping)
- [ Row Selection ](https://laravel-datatables.com/docs/feature-row-selection)
- [ Sorting and Searching ](https://laravel-datatables.com/docs/sorting-and-searching)
- [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence)
- [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation)

### Cell Renderer

- [ Action Buttons ](https://laravel-datatables.com/docs/renderer-action-buttons)
- [ Avatar ](https://laravel-datatables.com/docs/renderer-avatar)
- [ Checkmark ](https://laravel-datatables.com/docs/renderer-checkmark)
- [ Color Sample ](https://laravel-datatables.com/docs/renderer-color-sample)
- [ Email Link ](https://laravel-datatables.com/docs/renderer-email-to-link)
- [ External Link ](https://laravel-datatables.com/docs/renderer-external-link)
- [ Friendly Timestamp ](https://laravel-datatables.com/docs/renderer-friendly-timestamp)
- [ Image ](https://laravel-datatables.com/docs/renderer-image)
- [ Long Text ](https://laravel-datatables.com/docs/renderer-long-text)
- [ Phone Link ](https://laravel-datatables.com/docs/renderer-phone-link)
- [ Progress Bar ](https://laravel-datatables.com/docs/renderer-progress-bar)
- [ Status Badge ](https://laravel-datatables.com/docs/renderer-status-badge)
- [ URL Link ](https://laravel-datatables.com/docs/renderer-url-link)
- [ Wire Link ](https://laravel-datatables.com/docs/renderer-wire-link)

### Value Formatter

- [ Compact Number ](https://laravel-datatables.com/docs/formatter-compact-number)
- [ Currency ](https://laravel-datatables.com/docs/formatter-currency)
- [ Duration ](https://laravel-datatables.com/docs/formatter-duration)
- [ Friendly Filesize ](https://laravel-datatables.com/docs/formatter-friendly-filesize)
- [ Friendly Timestamp ](https://laravel-datatables.com/docs/formatter-friendly-timestamp)
- [ Locale Timestamp ](https://laravel-datatables.com/docs/formatter-locale-timestamp)
- [ Number ](https://laravel-datatables.com/docs/formatter-number)
- [ Percent ](https://laravel-datatables.com/docs/formatter-percent)

  Sorting Icons
=============

Sorting icons are class properties on the base Datatable component. Override them per table or through a shared base class.

 Per-table icon overrides PHP     `class ProductsDatatable extends \MorrowIt\LaravelDatatable\Http\Livewire\Datatable{    public string $sortAscIcon = '';    public string $sortDescIcon = '';    public string $sortDefaultIcon = '';}` 

 ```
class ProductsDatatable extends \MorrowIt\LaravelDatatable\Http\Livewire\Datatable
{
    public string $sortAscIcon = '';
    public string $sortDescIcon = '';
    public string $sortDefaultIcon = '';
}
```

 Shared base class PHP     `abstract class BaseDatatable extends \MorrowIt\LaravelDatatable\Http\Livewire\Datatable{    public string $sortAscIcon = '';    public string $sortDescIcon = '';    public string $sortDefaultIcon = '';}class OrdersDatatable extends BaseDatatable{}` 

 ```
abstract class BaseDatatable extends \MorrowIt\LaravelDatatable\Http\Livewire\Datatable
{
    public string $sortAscIcon = '';
    public string $sortDescIcon = '';
    public string $sortDefaultIcon = '';
}

class OrdersDatatable extends BaseDatatable
{
}
```

Guidelines
----------

Keep custom sort icons visually balanced and ensure they remain legible in both light and dark themes.

If icons are purely decorative, keep accessible sorting state text in headers so screen readers still receive direction context.

   © 2026 Copyright (C)  [ Morrow IT Consulting & Services ](https://morrow-it.services)  

 [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)