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
<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 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-200 dark:text-zinc-700 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 d="M20 6 9 17l-5-5"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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>
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 d="M12 16h.01"></path>
        <path d="M12 8v4"></path>
        <path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 d="M20 6 9 17l-5-5"></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">
    </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" role="status" aria-label="Success">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-200 dark:text-zinc-700 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 d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>Success</span>
      </span>
      <span class="badge badge-danger rounded-md" role="status" aria-label="HTML 5">
        <span>HTML 5</span>
      </span>
      <span class="badge badge-warning rounded-md" role="status" aria-label="Warning">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
          <path d="M12 9v4"></path>
          <path d="M12 17h.01"></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.