RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="space-y-12">
  <div>
    <h2 class="text-lg font-semibold">Icons with large size & different colors</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-8 h-8 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-success icon-desc-success"><title id="icon-title-success">Success</title>
        <desc id="icon-desc-success">Success icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" name="info" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-sky-700 dark:text-sky-400 w-8 h-8 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-info icon-desc-info"><title id="icon-title-info">Info</title>
        <desc id="icon-desc-info">Info icon</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-orange-700 dark:text-orange-400 w-8 h-8 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-warning icon-desc-warning"><title id="icon-title-warning">Warning</title>
        <desc id="icon-desc-warning">Warning icon</desc><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-rose-700 dark:text-rose-400 w-8 h-8 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-danger icon-desc-danger"><title id="icon-title-danger">Danger</title>
        <desc id="icon-desc-danger">Danger icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-emerald-700 dark:text-emerald-400 w-8 h-8 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-success icon-desc-success"><title id="icon-title-success">Success</title>
        <desc id="icon-desc-success">Success icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
      <svg class="text-sky-700 dark:text-sky-400 w-8 h-8 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
    </div>
  </div>
  <div>
    <h2 class="text-lg font-semibold">Custom Sized Icons</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <svg class="text-sky-700 dark:text-sky-400 w-10 h-10 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
      <svg class="text-emerald-700 dark:text-emerald-400 w-8 h-8 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
      <svg class="text-orange-700 dark:text-orange-400 w-6 h-6 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
      <svg class="text-rose-700 dark:text-rose-400 w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
      <svg class="w-4 h-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 18 18" role="img" focusable="false" aria-labelledby="icon-title-grid icon-desc-grid"><title id="icon-title-grid">Grid</title>
        <desc id="icon-desc-grid">Grid icon</desc>
        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z">
        </path>
      </svg>
    </div>
  </div>
  <div>
    <h2 class="text-lg font-semibold">Icons in badges, with different positions</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <span class="badge badge-success rounded-md badge-small" role="status" aria-label="Success">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="order-first ms-0 me-1.5 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-success icon-desc-success"><title id="icon-title-success">Success</title>
          <desc id="icon-desc-success">Success icon</desc><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>
        <span>Success</span>
      </span>
      <span class="badge badge-danger rounded-md badge-small" role="status" aria-label="HTML 5">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="order-last ms-1.5 me-0 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-empty_circle icon-desc-empty_circle"><title id="icon-title-empty_circle">Empty circle</title>
          <desc id="icon-desc-empty_circle">Empty circle icon</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span>HTML 5</span>
      </span>
      <span class="badge badge-warning rounded-md badge-small" role="status" aria-label="Warning">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true" class="order-first ms-0 me-1.5 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-warning icon-desc-warning"><title id="icon-title-warning">Warning</title>
          <desc id="icon-desc-warning">Warning icon</desc><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
        <span>Warning</span>
      </span>    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="space-y-12">
  <div>
    <h2 class="text-lg font-semibold">Icons with large size & different colors</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_icon(name: "success", color: :default, size: :lg) %>
      <%= rui_icon(name: "info", color: :info, size: :lg) %>
      <%= rui_icon(name: "warning", color: :warning, size: :lg) %>
      <%= rui_icon(name: "danger", color: :danger, size: :lg) %>
      <%= rui_icon(name: "success", color: :success, size: :lg) %>
      <%= rui_icon(name: "grid", color: :primary, size: :lg) %>
    </div>
  </div>
  <div>
    <h2 class="text-lg font-semibold">Custom Sized Icons</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_icon(name: "grid", color: :primary, size: :xl) %>
      <%= rui_icon(name: "grid", color: :success, size: :lg) %>
      <%= rui_icon(name: "grid", color: :warning, size: :md) %>
      <%= rui_icon(name: "grid", color: :danger, size: :sm) %>
      <%= rui_icon(name: "grid", color: :default, size: :xs) %>
    </div>
  </div>
  <div>
    <h2 class="text-lg font-semibold">Icons in badges, with different positions</h2>
    <div class="inline-flex flex-wrap gap-2 items-end mt-2">
      <%= rui_badge(text: "Success", status: :success) do |badge| %>
        <% badge.with_icon(name: "success", color: :default, position: :leading) %>
      <% end %>
      <%= rui_badge(status: :danger, text: "HTML 5") do |badge| %>
        <% badge.with_icon(name: "empty_circle", position: :trailing)%>
      <% end %>
      <%= rui_badge(text: "Warning", status: :warning) do |badge|   %>
        <% badge.with_icon(name: "warning", position: :leading) %>
      <% end %>
    </div>
  </div>
</div>

Icon Overview

This preview showcases various types of icons with different colors and sizes:

  • Default: Standard icon
  • Info: Informational icon
  • Warning: Cautionary icon
  • Success: Positive outcome icon
  • Danger: Critical or error icon
  • Primary: Primary action icon

Each icon demonstrates:

  • Unique styling based on icon type
  • Color variations
  • Size customization

How to use:

<%= rui_icon(name: "success", color: :primary, classes: "h-6 w-6") %>

No params configured.