Animated icon

The Animated Icon component is used to display animated visual representations that enhance user experience by conveying actions, statuses, or interactive elements more effectively than static icons. It is intended for dynamic visual feedback in the UI.

This is part of the design system extended layer 🤝 Questions or feedback? Reach out to #ux on slack.

Examples

<script>
export default {
  data() {
    return {
      animationsOn: false,
    };
  },
};
</script>
<template>
  <div class="gl-flex gl-gap-3 gl-flex-wrap hover:gl-cursor-pointer gl-select-none" @click="animationsOn = !animationsOn">
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-todo-icon name="todo" :isOn="animationsOn" />
      <span>todo</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-star-icon name="star" :isOn="animationsOn" />
      <span>star</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-sort-icon name="sort" :isOn="animationsOn" />
      <span>sort</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-smile-icon name="smile" :isOn="animationsOn" />
      <span>smile</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-sidebar-icon name="sidebar" :isOn="animationsOn" />
      <span>sidebar</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-notification-icon name="notifications" :isOn="animationsOn" />
      <span>notifications</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-chevron-right-down-icon name="chevron_right_down" :isOn="animationsOn" />
      <span>chevron-right-down</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-chevron-lg-right-down-icon name="chevron_lg_right_down" :isOn="animationsOn" />
      <span>chevron-lg-right-down</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-chevron-down-up-icon name="chevron_down_up" :isOn="animationsOn" />
      <span>chevron-down-up</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2">
      <gl-animated-chevron-lg-down-up-icon name="chevron_lg_down_up" :isOn="animationsOn" />
      <span>chevron-lg-down-up</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animationsOn: false,
    };
  },
};
</script>
<template>
  <div class="gl-flex gl-gap-3 gl-flex-wrap gl-select-none">
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
      <gl-animated-upload-icon name="upload" :isOn="animationsOn" />
      <span>upload</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
      <gl-animated-duo-chat-icon name="duo_chat" :isOn="animationsOn" />
      <span>duo-chat</span>
    </div>
    <div class="gl-p-4 gl-bg-strong gl-rounded-default gl-grid gl-place-items-center gl-text-sm gl-leading-16 gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
      <gl-animated-loader-icon name="loader" :isOn="animationsOn" />
      <span>loader</span>
    </div>
  </div>
</template>

Guidelines

When to use

To indicate loading states or transitions.
To provide visual emphasis for an interactive element.
To enhance engagement with subtle motion feedback.

Icon name	User action	When to use
`GlAnimatedChevronRightDownIcon`, `GlAnimatedChevronLgRightDownIcon`	Click, expand a section	Accordion component, settings section, global navigation section
`GlAnimatedChevronDownUpIcon`, `GlAnimatedChevronLgDownUpIcon`	Click	Comment block, CRUD component, dropdown component
`GlAnimatedDuoChatIcon`	Hover	GitLab Duo chat button
`GlAnimatedLoaderIcon`	—	Loading state, GitLab Duo writing an answer
`GlAnimatedNotificationIcon`	Click	Subscribe/unsubscribe button
`GlAnimatedSidebarIcon`	Click	Show/hide a sidebar button
`GlAnimatedSmileIcon`	Hover	Add reaction button
`GlAnimatedSortIcon`	Click	Sort button
`GlAnimatedStarIcon`	Click	Star/unstar button
`GlAnimatedTodoIcon`	Click	Add/remove from todo list button
`GlAnimatedUploadIcon`	Hover	Drop zone

When not to use

For essential UI actions where animation might cause unnecessary distraction.
In places where a static icon can sufficiently communicate the message.
If excessive animations could negatively impact performance.

Accessibility

Use aria-label to describe the purpose of the animation for screen readers.
Ensure that animations are subtle and do not trigger motion sensitivity issues.
Allow users to disable animations where necessary.

Code reference

GlAnimatedChevronDownUpIcon

import { GlAnimatedChevronDownUpIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedChevronLgDownUpIcon

import { GlAnimatedChevronLgDownUpIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedChevronLgRightDownIcon

import { GlAnimatedChevronLgRightDownIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedChevronRightDownIcon

import { GlAnimatedChevronRightDownIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedDuoChatIcon

import { GlAnimatedDuoChatIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedLoaderIcon

import { GlAnimatedLoaderIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedNotificationIcon

import { GlAnimatedNotificationIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedSidebarIcon

import { GlAnimatedSidebarIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedSmileIcon

import { GlAnimatedSmileIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedSortIcon

import { GlAnimatedSortIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedStarIcon

import { GlAnimatedStarIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedTodoIcon

import { GlAnimatedTodoIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

GlAnimatedUploadIcon

import { GlAnimatedUploadIcon } from '@gitlab/ui';

Props

Name	Description	Default
`ariaLabel`	`string` Accessible icon name used by screen readers and other assistive technologies. Provide when icon is not merely decorative	`undefined`
`variant`	`string` Icon variant	`'current'`
`isOn`	`boolean` Controls the animated state of the icon.	`false`

Last updated at: Monday, July 6, 2026 at 5:37 AM

Animated icon

Examples

Guidelines

When to use

When not to use

Categories

Accessibility

Code reference

GlAnimatedChevronDownUpIcon

Props

GlAnimatedChevronLgDownUpIcon

Props

GlAnimatedChevronLgRightDownIcon

Props

GlAnimatedChevronRightDownIcon

Props

GlAnimatedDuoChatIcon

Props

GlAnimatedLoaderIcon

Props

GlAnimatedNotificationIcon

Props

GlAnimatedSidebarIcon

Props

GlAnimatedSmileIcon

Props

GlAnimatedSortIcon

Props

GlAnimatedStarIcon

Props

GlAnimatedTodoIcon

Props

GlAnimatedUploadIcon

Props