On this page:
1.1 What is an icon?
1.2 About These Icons
1.3 Icon Style
light-metal-icon-color
metal-icon-color
dark-metal-icon-color
syntax-icon-color
halt-icon-color
run-icon-color
default-icon-height
toolbar-icon-height
default-icon-backing-scale
plastic-icon-material
rubber-icon-material
glass-icon-material
metal-icon-material
default-icon-material
bitmap-render-icon
icon-color->outline-color
1.4 Arrow Icons
right-arrow-icon
left-arrow-icon
up-arrow-icon
down-arrow-icon
right-over-arrow-icon
left-over-arrow-icon
right-under-arrow-icon
left-under-arrow-icon
1.5 Control Icons
bar-icon
play-icon
back-icon
fast-forward-icon
rewind-icon
stop-icon
record-icon
pause-icon
step-icon
step-back-icon
continue-forward-icon
continue-backward-icon
search-forward-icon
search-backward-icon
1.6 File Icons
floppy-disk-icon
save-icon
load-icon
small-save-icon
small-load-icon
1.7 Symbol and Text Icons
text-icon
recycle-icon
x-icon
check-icon
lambda-icon
hash-quote-icon
1.8 Miscellaneous Icons
regular-polygon-icon
stop-sign-icon
stop-signs-icon
foot-icon
magnifying-glass-icon
left-magnifying-glass-icon
bomb-icon
left-bomb-icon
clock-icon
stopwatch-icon
stethoscope-icon
short-stethoscope-icon
lock-icon
close-icon
1.9 Stickman Icons
standing-stickman-icon
running-stickman-icon
1.10 Tool Icons
check-syntax-icon
small-check-syntax-icon
macro-stepper-icon
small-macro-stepper-icon
debugger-icon
small-debugger-icon
debugger-bomb-color
macro-stepper-hash-color
small-macro-stepper-hash-color
6.12

1 Icons

Neil Toronto <neil.toronto@gmail.com>

1.1 What is an icon?

This section describes an ideal that DrRacket and its tools are steadily approaching.

As a first approximation, an icon is just a small bitmap%, usually with an alpha channel.

But an icon also communicates. Its shape and color are a visual metaphor for an action or a message. Icons should be easily recognizable, distinguishable, visually consistent, and metaphorically appropriate for the actions and messages they are used with. It can be difficult to meet all four requirements at once (“distinguishable” and “visually consistent’ are often at odds), but good examples, good abstractions, and an existing icon library help considerably.

Example: The Macro Stepper icon is composed by appending a text icon image and a step icon image to get image. The syntax quote icon image is the color that DrRacket colors syntax quotes by default. The step icon image is colored like DrRacket colors identifier syntax by default, and is shaped using metaphors used in debugger toolbars, TV remotes, and music players around the world. It is composed of image to connote starting and image to connote immediately stopping.

It would not do to have just image as the Macro Stepper icon: it would be too easily confused with the Debugger icon image, especially for new users and people with certain forms of color-blindness, and thus fail to be distinguishable enough.

As another example, the Check Syntax icon image connotes inspecting and passing. Notice that the check mark is also the color of syntax.

1.2 About These Icons

The icons in this collection are designed to be composed to create new ones: they are simple, thematically consistent, and can be constructed in any size and color. Further, slideshow’s pict combiners offer a way to compose them almost arbitrarily. For example, a media player application might create a large “step” button by superimposing a record-icon and a step-icon:
> (require pict images/icons/control images/icons/style)
> (pict->bitmap
   (cc-superimpose
    (bitmap (record-icon #:color "forestgreen" #:height 96
                         #:material glass-icon-material))
    (bitmap (step-icon #:color light-metal-icon-color #:height 48
                       #:material metal-icon-material))))

image

All the icons in this collection are first drawn using standard dc<%> drawing commands. Then, to get lighting effects, they are turned into 3D objects and ray traced. Many are afterward composed to create new icons; for example, the stop-signs-icon image superimposes three stop-sign-icons, and the magnifying-glass-icon image is composed of three others (frame, glass and handle).

The ray tracer helps keep icons visually consistent with each other and with physical objects in day-to-day life. As an example of the latter, the record-icon, when rendered in clear glass, looks like the clear, round button on a Wii Remote. See the plt-logo and planet-logo functions for more striking examples.

When the rendering API is stable enough to publish, it will allow anyone who can draw a shape to turn that shape into a visually consistent icon.

As with any sort of rendering (such as SVG rendering), ray tracing takes time. For icons, this usually happens during tool or application start up. You can reduce the portion of start-up time taken by rendering to almost nothing by using the images/compile-time library to embed bitmaps directly into compiled modules.

1.3 Icon Style

 (require images/icons/style) package: images-lib

Use these constants and parameters to help keep icon sets visually consistent.

value

light-metal-icon-color : (or/c string? (is-a?/c color%))

 = "azure"

value

metal-icon-color : (or/c string? (is-a?/c color%))

 = "lightsteelblue"

value

dark-metal-icon-color : (or/c string? (is-a?/c color%))

 = "steelblue"
Good colors to use with metal-icon-material. See bomb-icon and magnifying-glass-icon for examples.

value

syntax-icon-color : (or/c string? (is-a?/c color%))

 = (make-object color% 76 76 255)

value

halt-icon-color : (or/c string? (is-a?/c color%))

 = (make-object color% 255 32 24)

value

run-icon-color : (or/c string? (is-a?/c color%)) = "lawngreen"

Standard toolbar icon colors.

Use syntax-icon-color in icons that connote macro expansion or syntax. Example:
> (step-icon #:color syntax-icon-color #:height 32)

image

Use halt-icon-color in icons that connote stopping or errors. Example:
> (stop-icon #:color halt-icon-color #:height 32)

image

Use run-icon-color in icons that connote executing programs or evaluation. Examples:
> (play-icon #:color run-icon-color #:height 32)

image

> (require images/icons/stickman)
> (running-stickman-icon 0.9 #:height 32
                         #:body-color run-icon-color
                         #:arm-color "white"
                         #:head-color run-icon-color)

image

For new users and for accessibility reasons, do not try to differentiate icons for similar functions only by color.

parameter

(default-icon-height)  (and/c rational? (>=/c 0))

(default-icon-height height)  void?
  height : (and/c rational? (>=/c 0))
 = 24
The height of DrRacket’s standard icons.

parameter

(toolbar-icon-height)  (and/c rational? (>=/c 0))

(toolbar-icon-height height)  void?
  height : (and/c rational? (>=/c 0))
 = 16
The height of DrRacket toolbar icons.

Use (toolbar-icon-height) as the height argument for common icons that will be used in toolbars, status bars, and buttons.

(When making an icon for DrRacket’s main toolbar, try to keep it nearly square so that it will not take up too much horizontal space when the toolbar is docked vertically. If you cannot, as with the Macro Stepper, send a thinner icon as the alternate-bitmap argument to a switchable-button%.)

parameter

(default-icon-backing-scale)  (and/c rational? (>/c 0))

(default-icon-backing-scale scale)  void?
  scale : (and/c rational? (>/c 0))
 = 2
The backing scale of DrRacket icons.

A backing scale of 2 means that the icon bitmap internally has two pixels per drawing unit, so it renders well at double resolution, such as Retina display mode for Mac OS.

Added in version 1.1 of package images-lib.

value

plastic-icon-material : deep-flomap-material-value?

value

rubber-icon-material : deep-flomap-material-value?

value

glass-icon-material : deep-flomap-material-value?

value

metal-icon-material : deep-flomap-material-value?

Materials for icons.

Plastic is opaque and reflects a little more than glass.

Rubber is also opaque, reflects more light than plastic, but diffuses less.

Glass is transparent but frosted, so it scatters refracted light. It has the high refractive index of cubic zirconia, or fake diamond. The “glassy look” cannot actually be achieved using glass.

Metal reflects the most, its specular highlight is nearly the same color as the material (in the others, the highlight is white), and it diffuses much more ambient light than directional. This is because while plastic and glass mostly reflect light directly, metal mostly absorbs light and re-emits it.

Examples:
> (require images/icons/misc)
> (for/list ([material  (list plastic-icon-material
                              rubber-icon-material
                              glass-icon-material
                              metal-icon-material)])
    (bomb-icon #:height 32 #:material material))

(list image image image image)

parameter

(default-icon-material)  deep-flomap-material-value?

(default-icon-material material)  void?
  material : deep-flomap-material-value?
 = plastic-icon-material
The material used for rendering most icons and icon parts. There are exceptions; for example, the floppy-disk-icon always renders the sliding cover in metal.

procedure

(bitmap-render-icon bitmap [z-ratio material])  (is-a?/c bitmap%)

  bitmap : (is-a?/c bitmap%)
  z-ratio : (and rational? (>=/c 0)) = 5/8
  material : deep-flomap-material-value?
   = (default-icon-material)
Makes a 3D object out of bitmap and renders it as an icon.

The z-ratio argument only makes a difference when material is transparent, such as glass-icon-material. It controls what fraction of bitmap’s height the icon is raised, which in turn affects the refracted shadow under the icon: the higher the z-ratio, the lower the shadow.

Examples:
> (define bitmap
    (pict->bitmap (colorize (filled-ellipse 64 64) "tomato")))
> (for/list ([z-ratio  (in-range 0 2 1/3)])
    (bitmap-render-icon bitmap z-ratio glass-icon-material))

(list image image image image image image)

More complex shapes than “embossed and rounded” are possible with the full rendering API, which will be made public in a later release. Still, most of the simple icons (such as those in images/icons/arrow and images/icons/control) can be rendered using only bitmap-render-icon.

procedure

(icon-color->outline-color color)  (is-a?/c color%)

  color : (or/c string? (is-a?/c color%))
For a given icon color, returns the proper outline color%.

As an example, here is how to duplicate the record-icon using pict:
> (define outline-color (icon-color->outline-color "forestgreen"))
> (define brush-pict (colorize (filled-ellipse 62 62) "forestgreen"))
> (define pen-pict (linewidth 2 (colorize (ellipse 62 62) outline-color)))
> (bitmap-render-icon
   (pict->bitmap (inset (cc-superimpose brush-pict pen-pict) 1))
   5/8 glass-icon-material)

image

> (record-icon #:color "forestgreen" #:height 64
               #:material glass-icon-material)

image

The outline width is usually (/ height 32) (in this case, 2), but not always. (For example, recycle-icon is an exception, as are parts of floppy-disk-icon.)

1.4 Arrow Icons

 (require images/icons/arrow) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(right-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(left-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(up-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(down-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Standard directional arrows.

Example:
> (list (right-arrow-icon #:color syntax-icon-color
                          #:height (toolbar-icon-height))
        (left-arrow-icon #:color run-icon-color)
        (up-arrow-icon #:color halt-icon-color #:height 37)
        (down-arrow-icon #:color "lightblue" #:height 44
                         #:material glass-icon-material))

(list image image image image)

procedure

(right-over-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(left-over-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(right-under-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(left-under-arrow-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Standard bent arrows.

Example:
> (list (right-over-arrow-icon #:color metal-icon-color
                               #:height (toolbar-icon-height))
        (left-over-arrow-icon #:color dark-metal-icon-color)
        (right-under-arrow-icon #:color run-icon-color #:height 37)
        (left-under-arrow-icon #:color "lightgreen" #:height 44
                               #:material glass-icon-material))

(list image image image image)

1.5 Control Icons

 (require images/icons/control) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(bar-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (bar-icon #:color run-icon-color #:height 32)

image

This is not a “control” icon per se, but is used to make many others.

procedure

(play-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (play-icon #:color run-icon-color #:height 32)

image

procedure

(back-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (back-icon #:color run-icon-color #:height 32)

image

procedure

(fast-forward-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (fast-forward-icon #:color syntax-icon-color #:height 32)

image

procedure

(rewind-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (rewind-icon #:color syntax-icon-color #:height 32)

image

procedure

(stop-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (stop-icon #:color halt-icon-color #:height 32)

image

procedure

(record-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (record-icon #:color "red" #:height 32)

image

procedure

(pause-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (pause-icon #:color halt-icon-color #:height 32)

image

procedure

(step-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (step-icon #:color run-icon-color #:height 32)

image

procedure

(step-back-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (step-back-icon #:color run-icon-color #:height 32)

image

procedure

(continue-forward-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (continue-forward-icon #:color run-icon-color #:height 32)

image

procedure

(continue-backward-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (continue-backward-icon #:color run-icon-color #:height 32)

image

procedure

(search-forward-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (search-forward-icon #:color syntax-icon-color #:height 32)

image

procedure

(search-backward-icon #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (search-backward-icon #:color syntax-icon-color #:height 32)

image

1.6 File Icons

 (require images/icons/file) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(floppy-disk-icon [#:color color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "slategray"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (floppy-disk-icon #:height 32 #:material glass-icon-material)

image

procedure

(save-icon [#:disk-color disk-color    
  #:arrow-color arrow-color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  disk-color : (or/c string? (is-a?/c color%)) = "gold"
  arrow-color : (or/c string? (is-a?/c color%))
   = syntax-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (save-icon #:height 32)

image

procedure

(load-icon [#:disk-color disk-color    
  #:arrow-color arrow-color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  disk-color : (or/c string? (is-a?/c color%)) = "gold"
  arrow-color : (or/c string? (is-a?/c color%))
   = syntax-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (load-icon #:height 32)

image

procedure

(small-save-icon [#:disk-color disk-color 
  #:arrow-color arrow-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  disk-color : (or/c string? (is-a?/c color%)) = "gold"
  arrow-color : (or/c string? (is-a?/c color%))
   = syntax-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (small-save-icon #:height 32)

image

procedure

(small-load-icon [#:disk-color disk-color 
  #:arrow-color arrow-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  disk-color : (or/c string? (is-a?/c color%)) = "gold"
  arrow-color : (or/c string? (is-a?/c color%))
   = syntax-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (small-load-icon #:height 32)

image

1.7 Symbol and Text Icons

 (require images/icons/symbol) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(text-icon str    
  [font    
  #:trim? trim?    
  #:color color    
  #:height height    
  #:material material    
  #:outline outline    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  str : string?
  font : (is-a?/c font%) = (make-font)
  trim? : boolean? = #t
  color : (or/c string? (is-a?/c color%)) = "white"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  outline : (and/c rational? (>=/c 0)) = (/ height 32)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Renders a text string as an icon. For example,
> (text-icon "An Important Point!"
             (make-font #:weight 'bold #:underlined? #t)
             #:color "lightskyblue" #:height 44)

image

The size of font is ignored. If trim? is #f, the drawn text is not cropped before rendering. Otherwise, it is cropped to the smallest rectangle containing all the non-zero-alpha pixels. Rendering very small glyphs shows the difference dramatically:
> (list (text-icon "." #:trim? #t)
        (text-icon "." #:trim? #f))

(list image image)

Notice that both icons are (default-icon-height) pixels tall.

Because different platforms have different fonts, text-icon cannot guarantee the icons it returns have a consistent look or width across all platforms, or that any unicode characters in str will exist.

procedure

(recycle-icon [#:color color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "forestgreen"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Returns the universal recycling symbol, rendered as an icon.

Example:
> (recycle-icon #:height 48)

image

procedure

(x-icon [#:color color    
  #:height height    
  #:material material    
  #:thickness thickness    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = halt-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  thickness : (and/c rational? (>=/c 0)) = 10
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Returns an “x” icon that is guaranteed to look the same on all platforms. (Anything similar that would be constructed by text-icon would differ at least slightly across platforms.)

Example:
> (x-icon #:height 32)

image

Changed in version 1.1 of package images-lib: Added optional #:thickness argument.

procedure

(check-icon [#:color color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = run-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (check-icon #:height 32)

image

procedure

(lambda-icon [#:color color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (lambda-icon #:height 32 #:material metal-icon-material)

image

procedure

(hash-quote-icon [#:color color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "mediumseagreen"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Examples:
> (require (only-in images/icons/tool macro-stepper-hash-color))
> (hash-quote-icon #:color macro-stepper-hash-color #:height 32)

image

1.8 Miscellaneous Icons

 (require images/icons/misc) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(regular-polygon-icon sides 
  [start] 
  #:color color 
  [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  sides : exact-positive-integer?
  start : real? = (- (/ pi sides) (* 1/2 pi))
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Renders the largest regular polygon with sides sides, with the first vertex at angle start, that can be centered in a height × height box. The default start angle is chosen so that the polygon has a horizontal bottom edge.

Example:
> (for/list ([sides  (in-range 1 9)]
             [material  (in-cycle (list plastic-icon-material
                                        glass-icon-material))])
    (regular-polygon-icon sides #:color "cornflowerblue" #:height 32
                          #:material material))

(list image image image image image image image image)

procedure

(stop-sign-icon [#:color color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = halt-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (stop-sign-icon #:height 32 #:material glass-icon-material)

image

procedure

(stop-signs-icon [#:color color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = halt-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (stop-signs-icon #:height 32 #:material plastic-icon-material)

image

procedure

(foot-icon #:color color    
  [#:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%))
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (foot-icon #:color "chocolate" #:height 32
             #:material glass-icon-material)

image

procedure

(magnifying-glass-icon [#:frame-color frame-color 
  #:handle-color handle-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  frame-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  handle-color : (or/c string? (is-a?/c color%)) = "brown"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (magnifying-glass-icon #:height 32)

image

procedure

(left-magnifying-glass-icon [#:frame-color frame-color 
  #:handle-color handle-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  frame-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  handle-color : (or/c string? (is-a?/c color%)) = "brown"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (left-magnifying-glass-icon #:height 32)

image

procedure

(bomb-icon [#:cap-color cap-color    
  #:bomb-color bomb-color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  cap-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  bomb-color : (or/c string? (is-a?/c color%))
   = dark-metal-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (bomb-icon #:height 48 #:material glass-icon-material)

image

procedure

(left-bomb-icon [#:cap-color cap-color 
  #:bomb-color bomb-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  cap-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  bomb-color : (or/c string? (is-a?/c color%))
   = dark-metal-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (left-bomb-icon #:height 48)

image

procedure

(clock-icon [hours    
  minutes    
  #:face-color face-color    
  #:hand-color hand-color    
  #:height height    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  hours : (integer-in 0 11) = 0
  minutes : (real-in 0 60) = 47
  face-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  hand-color : (or/c string? (is-a?/c color%)) = "firebrick"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Examples:
> (clock-icon #:height 96)

image

> (clock-icon 3 21 #:height 48
              #:face-color "lightblue"
              #:hand-color "darkblue")

image

procedure

(stopwatch-icon [hours 
  minutes 
  #:face-color face-color 
  #:hand-color hand-color 
  #:height height 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  hours : (integer-in 0 11) = 0
  minutes : (real-in 0 60) = 47
  face-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  hand-color : (or/c string? (is-a?/c color%)) = "firebrick"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (stopwatch-icon #:height 96)

image

procedure

(stethoscope-icon [#:color color 
  #:height height 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "black"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (stethoscope-icon #:height 96)

image

procedure

(short-stethoscope-icon [#:color color 
  #:height height 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "black"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (short-stethoscope-icon #:color "purple" #:height 96)

image

procedure

(lock-icon [open?    
  #:body-color body-color    
  #:shackle-color shackle-color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  open? : boolean? = #f
  body-color : (or/c string? (is-a?/c color%)) = "orange"
  shackle-color : (or/c string? (is-a?/c color%))
   = light-metal-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Examples:
> (lock-icon #:height 32)

image

> (lock-icon #t #:height 48
             #:body-color "navajowhite"
             #:shackle-color "lemonchiffon"
             #:material glass-icon-material)

image

procedure

(close-icon [#:color color    
  #:height height    
  #:material material    
  #:backing-scale backing-scale])  (is-a?/c bitmap%)
  color : (or/c string? (is-a?/c color%)) = "black"
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

Example:
> (close-icon #:height 32 #:material glass-icon-material)

image

Added in version 1.1 of package images-lib.

1.9 Stickman Icons

 (require images/icons/stickman) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(standing-stickman-icon [#:body-color body-color 
  #:arm-color arm-color 
  #:head-color head-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  body-color : (or/c string? (is-a?/c color%)) = run-icon-color
  arm-color : (or/c string? (is-a?/c color%)) = "white"
  head-color : (or/c string? (is-a?/c color%)) = run-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Returns the icon displayed in DrRacket’s lower-right corner when no program is running.

Example:
> (standing-stickman-icon #:height 64)

image

procedure

(running-stickman-icon t 
  [#:body-color body-color 
  #:arm-color arm-color 
  #:head-color head-color 
  #:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  t : rational?
  body-color : (or/c string? (is-a?/c color%)) = run-icon-color
  arm-color : (or/c string? (is-a?/c color%)) = "white"
  head-color : (or/c string? (is-a?/c color%)) = run-icon-color
  height : (and/c rational? (>=/c 0)) = (default-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Returns a frame of the icon animated in DrRacket’s lower-right corner when a program is running. The frame returned is for time t of a run cycle with a one-second period.

The following example samples the run cycle at 12 Hz, or every 1/12 second:
> (for/list ([t  (in-range 0 1 1/12)])
    (running-stickman-icon t #:height 32))

(list image image image image image image image image image image image image)

The stickman’s joint angles are defined by continuous periodic functions, so the run cycle can be sampled at any resolution, or at any real-valued time t. The cycle is modeled after the run cycle of the player’s avatar in the Commodore 64 game Impossible Mission.

1.10 Tool Icons

 (require images/icons/tool) package: images-lib

Changed in version 1.1 of package images-lib: Added optional #:backing-scale arguments.

procedure

(check-syntax-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(small-check-syntax-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Icons for Check Syntax. The small-check-syntax-icon is used when the toolbar is on the side.

Example:
> (list (check-syntax-icon #:height 32)
        (small-check-syntax-icon #:height 32))

(list image image)

procedure

(macro-stepper-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(small-macro-stepper-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Icons for the Macro Stepper. The small-macro-stepper-icon is used when the toolbar is on the side.

Example:
> (list (macro-stepper-icon #:height 32)
        (small-macro-stepper-icon #:height 32))

(list image image)

procedure

(debugger-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)

procedure

(small-debugger-icon [#:height height 
  #:material material 
  #:backing-scale backing-scale]) 
  (is-a?/c bitmap%)
  height : (and/c rational? (>=/c 0)) = (toolbar-icon-height)
  material : deep-flomap-material-value?
   = (default-icon-material)
  backing-scale : (and/c rational? (>/c 0.0))
   = (default-icon-backing-scale)
Icons for the Debugger. The small-debugger-icon is used when the toolbar is on the side.

Example:
> (list (debugger-icon #:height 32)
        (small-debugger-icon #:height 32))

(list image image)

value

debugger-bomb-color : (or/c string? (is-a?/c color%))

 = (make-object color% 128 32 32)

value

macro-stepper-hash-color : (or/c string? (is-a?/c color%))

 = (make-object color% 60 192 60)

value

small-macro-stepper-hash-color : (or/c string? (is-a?/c color%))

 = (make-object color% 128 255 128)
Constants used within images/icons/tool.