# Swinging Bell Notification Icon

Using an SVG Bell icon and custom tailwind class, we can make a bell symbol that swings to draw the user's attention.

![](/files/-MErDILTOwdwUT9DARYo)

### Create the Icon

Not a requirement for this example (you could in-line the SVG) but here I have downloaded one of the Heroicons from <https://heroicons.dev/> and made it into a Laravel 7 component.

views/components/svg/bell.blade.php

```
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {{ $attributes->merge(['class'=>'inline-block']) }}>
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
    </path>
</svg>
```

This uses most of the code copied from the heroicons site, but with the addition of merging any passed attributes.

### Create the blade content for the bell

```markup
@if($notifications->count() > 0)
    <span class="text-base tracking-tighter text-yellow-500">
        <x-svg.bell class="h-5 -mr-1 align-text-top animate-swing origin-top"/>
        <sup>{{ $notifications->count() }}</sup>
    </span>
@endif
```

### Create Tailwind Extension

In the code above, you will see a new class; `animate-swing`we add this using the tailwind.config.js file

```javascript
extend: {
      keyframes: {
        'swing': {
          '0%,100%' : { transform: 'rotate(15deg)' },
          '50%' : { transform: 'rotate(-15deg)' },
        }
      },
      animation: {
        'swing': 'swing 1s infinite'
      }
    }
```

The bell is rotated around a point that is in the centre top of the icon, starting at 15 degrees through 0 degrees to -15 degrees and back again over a 1 second duration.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://talltips.novate.co.uk/tailwind/swinging-bell-notification-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.